js01

<!DOCTYPE html>  自动换图片
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function changeImg(){
				var img = document.getElementById("img1")
				img.src = "3.jpg"
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击切换图片" onclick="changeImg()" /><br />
		<img src="2.jpg" id="img1"/>
	</body>
</html>

 

<!DOCTYPE html>   定时器
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//window 对象是一个最顶层的对象  window 可以省略
			function test(){
				console.log("执行了")
			}
//			window.setInterval("test()",2000)
//			setTimeout("test()",2000)
			var timeId
			function startDingshi(){
				timeId = setInterval("test()",2000)
			}
			function stopDingshi(){
				clearInterval(timeId)
			}
		</script>
	</head>
	<body>
		<input type="button" value="开启定时器" onclick="startDingshi()"/>
		<input type="button" value="取消定时器" onclick="stopDingshi()" />
	</body>
</html>

  

<!DOCTYPE html>    轮播
<html>
	<head>
		<!--
			1、确定事件:文档加载完成的时间
			2、事件触发:  init()
			3、init()里通常会去操作元素
					开启定时器:   定时器执行切换图片的函数 changeImg()
			4、checkImg()  :   
				获得切换图片的函数、切换图片
		-->
		<meta charset="UTF-8">
		<title></title>
		<script>
			var index = 1
			function changeImg(){
				var img = document.getElementById("img1");
				var curIndex = index%3 + 1;
				img.src = curIndex + ".jpg";
				index  = index + 1;
			}
			function init(){
				setInterval("changeImg()",1000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="1.jpg" width="100%" id="img1"/>
	</body>
</html>

 

<!DOCTYPE html>   主要是用 display属性
<html>
	<!--需求:  打开网页时,5秒后显示一个广告,让我们看5秒钟后 ,广告自动消失-->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
			 * 文档加载顺序
			 */
			function showImg(){
				var img = document.getElementById("img1")
				img.style.display = ""
			}
			function hiddenImg(){
				var img = document.getElementById("img1")
				img.style.display = "none"
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()" />		
		<input type="button" value="隐藏" onclick="hiddenImg()"/>
		 <img src="1.jpg" width="100%" id = "img1" style="display:"/>
	</body>
</html>

  

js01

上一篇:HTML&&CSS


下一篇:【Android开发】APP桌面角标问题