setTimeout()定时器
setTimeout()定时器
蒙懵懵 发表于2年前
setTimeout()定时器
  • 发表于 2年前
  • 阅读 26
  • 收藏 3
  • 点赞 0
  • 评论 0
摘要: setTimeout()定时器 的运用,以及如何根据客户端窗口大小而计算图像的缩放,浏览器改变大小时一并调整网页里的图像。
<html>
	<head>
	<title>chapter3</title>
	<script>
	function resizeRock(){ 
		document.getElementById("rockImg").style.height =
		(document.body.clientHeight -100) * 0.3;  //根据客户端窗口尺寸,缩放rock的大小
	}

	function rockUser() {
		alert("hello, i'm your pet rock.");
	}

	function touchRock() {
		var userName = prompt("what's your name?");
		
		if (userName){
			alert("It is good to meet you," + userName + ".");
		}
		document.getElementById("rockImg").src = "rock_happy.png";
		setTimeout("document.getElementById('rockImg').src = 'rock.png';", 5 * 1000);
		//单次定时器setTimeout()函数需定时器停止时要运行的语句,和延迟的时间,这里延迟5秒
		//还有一个是间隔定时器,setInterval()函数,这个是每一次间隔时间到期就运行语句(反复)

	}
	</script>
	</head>
	<body onload="resizeRock(); rockUser();" onresize="resizeRock()"> 
	<!--调整浏览器大小时将触发onresize事件,调用resizeRock函数响应onresize事件-->
		<div style="margin-top:100px; text-align:center">
			<img id="rockImg" src="rock.png" onclick="touchRock()">
		</div>
	</body>
</html>


共有 人打赏支持
粉丝 5
博文 9
码字总数 8417
×
蒙懵懵
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: