学习web第四周第四天_第一列插入图书封面图片,对应素材文件夹images中的book.jpg,宽高均为200px,要求居-CSDN博客

本文链接：https://blog.csdn.net/Angelhhcn/article/details/101535634

今天代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#gl{
				height: 100px;
				width: 100px;
				background-color: red;
			}
			#al1{
				width: 200px;
				height: 200px;
				border: 1px solid;
			}
			#al2{
				width: 100px;
				height: 100px;
				border: 1px solid;
			}
			#al3{
				width: 100px;
				height: 100px;
				border: 1px solid;
			}
			#al4{
				width: 700px;
				height: 400px;
				border: 1px solid;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//获取id为gl的div
				var gl=document.getElementById("gl");
				//为gl绑定事件
				gl.onmousewheel=function(event){
					event=event||window.event;
					if(event.wheelDelta>0||event.detail<0){
						if(gl.clientHeight>10){
						gl.style.height=gl.clientHeight-10+"px";
						}
					}else{
						gl.style.height=gl.clientHeight+10+"px";
					}
					return false;
				bind(gl,"DOMMouseScroll",gl.onmousewheel);
				};
				
				
				
				
				
				//事件监听第一个计时器
				var count=document.getElementById("count");
				var num=1;
				
				var timer=setInterval(function(){
					if(num<=10){
					count.innerHTML=num++;
					}
				},500);
				
				//时间监听第二个计时器
				var count1=document.getElementById("count1");
				var num1=1;
				var t=setInterval(function(){
				count1.innerHTML=num1++;
				if(num1>10){
					clearInterval(t);
				}
			},500)
				
				
				//图片变换
				var ks=document.getElementById("ks");
				//图片改变src
				//创建数组，把图片所有src放在一个数组里
				var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				var img=document.getElementById("img");
				var index=0;
				var timer;
				//0.5秒改变一次图片的scr
				ks.onclick=function(){
					clearInterval(timer);
				timer=setInterval(function(){
					if(index<imgArr.length){
					img.src=imgArr[index++];
					}
					if(index>=imgArr.length){
						index=0;
					}
				},500);
				
				};
				var js=document.getElementById("js");
				js.onclick=function(){
					clearInterval(timer);
				};
				
			};
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					obj.addEventListener(eventStr,callback,false);
				}else{
					obj.attachEvent("on"+eventStr,function(){
						callback.call(obj);
						
					}
					
					)
				}
			}
			
		</script>
	</head>
	<body>
		<div id="al1">
		<div id="gl">
			
		</div>
		</div>
		<div id="al2">
			<h1 id="count"></h1>
		</div>
		<div id="al3">
			<h1 id="count1"></h1>
		</div>
		<div id="al4">
			<input type="button" value="开始" id="ks" />
			<input type="button" value="结束" id="js"/>
			<img src="img/1.jpg" id="img" />
		</div>
	</body>
</html>

下午代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/Vue.js"></script>
	</head>
	<body> 
		<div id="app">
			{{i}}
		</div>
		
		<div id="app1">
			{{i}}{{j}}
		</div>
		<div id="app2">
			{{a}}
		</div>
		<div id="app3">
			{{i}}
		</div>
		<div id="app4">{{a}}</div>
		<div id="app5">
			<p>{{ a }}</p>
			<!--
           		这里是'for'不会更新
            -->
			<button v-on:click="a = '点击之后，现在我不爱你了'">点击我，有惊喜</button>
			<div id="app6">
			<p>{{ a }}</p>
			<!--
           		这里是'for'不会更新
            -->
			
		</div>
		</div>
			<script type="text/javascript">
			//第一个界面
			//new vue()
			new Vue({
				el:'#app',
				data:{
					i:"好久不见",
				}
			});
			//console.log(i);
			
			//第二个界面
			//new vue()
			new Vue({
				el:'#app1',
				data:{
					i:"好久不见",
					j:"再见"
				}
			});
			//第三个界面
			var data={a:1};
			var vm=new Vue({
				el:"#app2",
				data:data
			});
			data.a="hi"
			//第四个界面
			var data1={
				i:"好久不见",
			};
			new Vue({
				el:"#app3",
				data:data1
			});
			data1.i="再见";
			//第五个界面
			var data={a:1}
		var vm=new Vue({
				el:"#app4",
				data:data
		});
		//console.log(data.a==vm.a); 
//		data.a=2;
//		console.log(data.a);
//		console.log(vm.a);
//		vm.a=3;
//		console.log(data.a);
//		console.log(vm.a);
		//第6个界面
		var obj={
				a:'以前我爱你'
			} 
			var vm=new Vue({
				el:'#app5',
				data:obj
			})
		//第7个界面
			var data1={a:'以前我爱你'};
			Object.freeze(data1);
			data1.a="爱你";
			var vm=new Vue({
				el:'#app6',
				data:data1
			})
		</script>
	</body>
</html>