倒计时显示图片

最新推荐文章于 2021-05-19 03:09:24 发布

顾言诺

最新推荐文章于 2021-05-19 03:09:24 发布

阅读量655

点赞数

CC 4.0 BY-SA版权

分类专栏： json

本文链接：https://blog.youkuaiyun.com/weixin_40621394/article/details/83177985

json 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的倒计时功能，倒计时结束后页面将显示一张图片，并且图片可以通过点击更换。代码中包含了按钮触发、定时器设置及DOM操作等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js页面

//倒计时  显示图片
		var count = 3;
		function test4() {
		var div2 = document.getElementById("div2");
			div2.align = "center";
			div2.style.fontSize = "50px";
			div2.innerHTML = count--;
			if(count == -1){
				//count = 10;
				clearInterval(label);
				div2.innerHTML = "";
				var img = document.createElement("img");
				img.style.width = "60%";
				img.src = "img/hhh.jpg";
				img.onclick = function(){
					var i = Math.floor(Math.random()*5+1);
					img.src = "img/" + i +".jpg";
				}
				div2.appendChild(img);
			}
	
		}
		function test5(){
			label = setInterval(test4, 1000);
		}
	//注意图片路径

页面


	<input type="button" onclick="test4()"value="倒计时">
	<input type="button" onclick="test5()"value="点击倒计时显示图片">
		<div id="div2"></div>
	</body>