JS学习第三周总结

最新推荐文章于 2023-03-05 10:03:16 发布

恋风（微信）

最新推荐文章于 2023-03-05 10:03:16 发布

阅读量302

点赞数

分类专栏： JS学习笔记 JS学习笔记

本文链接：https://blog.csdn.net/weixin_44791254/article/details/89074060

版权

JS学习笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

JS学习笔记

22 篇文章 0 订阅

订阅专栏

1.日期对象

内置对象，JS中有很多内置对象 Math Array Date Vue
var date=new Date();// 调用的是系统时间，如果运行程序的电脑时间改了，获取到的时间也会跟着变
getTime，获得到的毫秒数
- 1秒等于1000毫秒
- 从1970年至今的毫秒数
- 2038年问题
getFullYear，获取年份当前年份
getMonth，获取月份 0-11月
getDate，获取几号 1-31号
getDay，获取星期几 0-6
getHours，获取时
getMinutes，获取分
getSeconds，获取秒

2.定时器

window.setInterval(执行函数，间隔时间);//间隔时间必须是毫秒；window可省略。
- 注意：第一个参数必须是一个函数，可传入函数名，但是不能加括号。
setTimeout(函数，间隔时间)；
- 这个定时器是间隔时间之后执行函数，只执行一次，和定时炸弹类似
- setInterval定时器是每间隔多少秒就执行一次，一直循环，除非清除定时器
- 案例：5s之后页面自动跳转
  - window.location.href=“url”;//BOM里面内容
  - setTimeout可以实现倒计时

3.arguments

arguments.length 实参个数
argument.callee 代表当前执行的函数
函数自己调用自己可以使用arguments.callee来替代
递归的典型案例——斐波那契数列 1 1 2 3 5 8 13 21

4.运算符

一元运算符正号、符号、++、–
二元运算符 +、-、*、/、%
三元运算符表达式？真：假
逻辑运算符 &&、||、！
关系运算符 >、<、>=、<=、==、===、！=、！==
优先级顺序
- ()括号
- ！非、-符号++、–
- *、/、%
- +、-
- >、<、>=、<=
- ==、===、！=、！==
- &&
- ||
- 三元运算符
五种假：0、null、undefined、""、false
&&：同真为真；
||：同假为假；

var a =  2  &&  4  || 3 ;//返回4
var b = 0 && 3 || 4 ;//返回4
var c= 0 && 1 || 3 && 4;//返回4
var d = 4 && 5 && 6 ;//返回6

5.数值转字符串

String() 它的参数是字符串

var str=123;
String(str);//返回的是字符串的123

+"" +起到字符串拼接作用

var str=123;
str+"";//返回的是字符串的123

toString() 它的参数是基数，可以传2，8，10，16等进制数

var str=123;
str.toString(2);//返回的是字符串的二进制的123

6.检测字符串长度

charAt(); （下标）根据下标，返回对应的字符
charCodeAt(); 根据下标，返回对应的字符编码
length; 返回字符串长度
- 空格也算字符，一个字母对应的长度是1，汉字长度是2
- 但是length方法获取到的汉字长度是1，当成字母来处理，所以有问题
- 封装一个方法来处理这个汉字长度的问题，借助charCodeAt方法
- 一般英文字符字符编码在0~121之间

7.根据字符返回下标

indexOf(); 找最前面的那个指定字符，找到就结束了
lastIndexOf(); 找的是最后面的那个指定字符，找到就结束。但是也是从最前面开始计数。
查找结果返回-1，指的是没有找到指定字符。

8.网址编码及解码

编码encodeURICompent;
解码decodeURICompent;

9.字符串操作

concat; 能进行数组及字符串的合并
slice; 有两个参数，开始位置和结束位置。包含开始位置下标，但不包含结束位置下标。如果不传第二个参数，默认截取到结束。可以传负值，就是从最后面开始数负数的绝对值个数。
substr；两个参数，开始位置和截取长度。包含开始位置下标字符。类似于数组的splice。文档中[ ]里面的是可选参数。
- 一般不要使用负数，在IE6、7、8中会出问题。
substring；两个参数，始终会以小的为开始位置，大的为截取长度，

对数值保留两位小数

方法一：toFixed(2); 数学里面提供的方法，对象必须是数字,有四舍五入。
方法二：数值乘100，取整，再除以100
方法三：sunstr(0,indexOf("."))

10.文件上传判断

input中type="file"属性 HTML5中的表单新控件
onchange事件

11.转换大小写

toUpperCase
toLowerCases

12.另一种获取元素方式

querySelector HTML5中提供的方法，可以传span、.span、#span，只返回第一个元素。
querySelectorAll 获取全部元素。
IE8是兼容这两个方法的，可以放心使用

13.缓动公式

加速运动公式：leader=leader+(target-leader)/10;

leader：起始位置
target：目标位置

14.获取元素的尺寸

通过style是拿不到写在style样式表中尺寸信息的，只能用来添加行内样式，也只能获取行内样式数据，以字符串形式返回，比如：“200px”。
offset：自己。offsetWidth、offsetHeight来获取样式表或行内的宽高信息。
- offsetWidth和offsetHeight能获取内容区和内边距、边框的累积尺寸。
- offsetWidth=width+padding+border。
offsetLeft、offsetTop：找离自己最近的带有定位的父元素，如果父元素都没有添加定位，就找body。
- offsetLeft包含内边距、不包含边框。
offsetParent：拿到的是离他最近的带有定位的父元素。tagName，拿到标签名，大写的。

15.event

js是事件驱动的
event事件对象
存在兼容问题，IE只认识window.event
event事件对象属性
- clientX; 是以当前窗口、可视区为基准的。
- clientY;
- pageX; 是以整个文档为基准的。
- pageY;
- screenX; 是以电脑屏幕为基准的。
- screenY;
onmouseover 鼠标经过元素，只触发一次
onmousemove 鼠标移动，鼠标只要动就会触发事件

16.短信验证案例

单标签内容用value
双标签内容用innerHTML
在定时器中，this指向的是window
声明that或者_this变量存储this，后面就可以调用了
声明timer等于null，然后使用clearInterval清除定时器
用定时器一般都是先清除定时器
disabled=“disabled” 按钮点击禁用
在定时器外面在单独调用一次函数，可以清除页面的短暂停留，能很好的过渡

17.新增属性

text-shadow 文字阴影
box-shadow 盒子阴影

1.简单日历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:500px;
				height:500px;
				margin:100px auto;
				border:2px solid peru;
				border-radius: 20px;
				box-shadow: 5px 5px 5px #999;
				overflow: hidden;
			}
			p{
				height:100px;
				width:500px;
				text-align: center;
				font-size:50px;
				color:purple;
				line-height: 100px;
				text-shadow: 5px 5px 5px #999999;
			}
			#time{
				width:500px;
				height:50px;
				background-color: skyblue;
				text-align: center;
				line-height: 50px;
				font-size:20px;
				text-shadow: 5px 5px 5px #999;
			}
			#week{
				width:500px;
				height:100px;
				background-color: honeydew;
				text-align: center;
				line-height: 100px;
				font-size:40px;
				text-shadow: 5px 5px 5px #999;
			}
			#day{
				width:500px;
				height:250px;
				background-color: gainsboro;
				text-align: center;
				line-height:250px;
				font-size:60px;
				text-shadow: 5px 5px 5px #999;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p>金牌日历</p>
			<div id="time">
				<span></span>
			</div>
			<div id="week">
				<span></span>
			</div>
			<div id="day">
				<span></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var date=new Date();
		var y=date.getFullYear();
		var m=date.getMonth()+1;
		var d=date.getDate();
		var w=date.getDay();
		var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
		var spans=document.getElementsByTagName("span");
		spans[0].innerHTML=y+"年"+m+"月"+d+"日";
		spans[1].innerHTML=arr[w];
		spans[2].innerHTML=d+"号";
	</script>
</html>

2.数字时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: block;
				width:200px;
				height:80px;
				margin:100px auto;
				border: 2px solid skyblue;
				background-color:papayawhip;
				border-radius: 10px;
				text-align: center;
				font-size:30px;
				line-height: 80px;
				letter-spacing: 5px;
				color:red;
			}
		</style>
	</head>
	<body>
		<span id="time"></span>
		<script type="text/javascript">
			var time=document.getElementById("time");
			function timeShow(){				
				var date=new Date();
				var h=date.getHours();
				var m=date.getMinutes();
				var s=date.getSeconds();
				h<10?h="0"+h:h;
				m<10?m="0"+m:m;
				s<10?s="0"+s:s;				
				time.innerHTML=h+":"+m+":"+s;
			}
			setInterval(timeShow,1000);
		</script>
	</body>
</html>

3.倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				display: block;
				width:500px;
				height:50px;
				margin:20px auto;
				border: 2px solid skyblue;
				background-color:papayawhip;
				border-radius: 10px;
				text-align: center;
				font-size:24px;
				line-height:50px;
				letter-spacing: 5px;
				color:red;
				float:left;
			}
		</style>
	</head>
	<body>
		<span>距离十月一号阅兵还有：</span>
		<span id="time"></span>
		<script type="text/javascript">
			var time=document.getElementById("time");
			function djs(){				
				var date1=new Date("2019/10/1 8:00:00");
				var date2=new Date();
				var hs=date1.getTime()-date2.getTime();
				var df=hs/(1000*60*60*24);
				var d=parseInt(df);
				var hf=(df-d)*24;
				var h=parseInt(hf);
				var mf=(hf-h)*60;
				var m=parseInt(mf);
				var sf=(mf-m)*60;
				var s=parseInt(sf);
				time.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
			}
			setInterval(djs,1000);			
		</script>
	</body>
</html>

4.真实时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				height:332px;
				width:388px;
				background: url(img/z.png);
				margin: 100px auto;
				position: relative;
			}
			span{
				height:332px;
				width:388px;
				display: block;
				position: absolute;
				top:0;
				left:0;
			}
			span:nth-child(1){				
				background: url(img/h.png) no-repeat center;
			}
			span:nth-child(2){				
				background: url(img/m.png) no-repeat center;
			}
			span:nth-child(3){				
				background: url(img/s.png) no-repeat center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span id="h"></span>
			<span id="m"></span>
			<span id="s"></span>
		</div>	
		<script type="text/javascript">
			function $id(id){
				return document.getElementById(id);
			}
			var h=$id("h");
			var m=$id("m");
			var s=$id("s");
			clock();
			setInterval(clock,1000);			
			function clock(){
				var date=new Date();
				var ms=date.getMilliseconds();
				var ss=date.getSeconds()+ms/1000;
				var mm=date.getMinutes()+ss/60;
				var hh=date.getHours()+mm/60;
				s.style.transform="rotate("+(ss*6)+"deg)";
				m.style.transform="rotate("+(mm*6)+"deg)";
				h.style.transform="rotate("+(hh*30)+"deg)";
			}
		</script>
	</body>
</html>

5.短信验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="text" />
		<button>点击发送验证码</button>
		<script type="text/javascript">
			var btn=document.getElementsByTagName("button")[0];
			btn.function(){
				var that=this;//使用that变量来存储this
				var timer=null;//声明暂时未赋值的变量，一般让它等于null
				var count=5;//点击事件内部声明，可以不用重新赋值
				clearInterval(timer);//使用定时器，上来先清除定时器
				timer=setInterval(sendMsg,1000);//使用timer来指向定时器，方便清除操作
				function sendMsg(){
					count--;
					if(count<0){
						that.innerHTML="点击重新发送";//单标签内容一般用value，双标签一般用innerHTML
						clearInterval(timer);
						that.disabled=false;//恢复按钮点击
					}else{
						that.innerHTML="倒计时还有"+count+"秒";
						that.disabled=true;//禁用按钮点击功能
					}
				}
			}
		</script>
	</body>
</html>

6.5s后关闭广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#ad{
				width:100%;
				height:800px;
				background-color:skyblue;
			}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script type="text/javascript">
			var ad=document.getElementById("ad");
			var count=5;
			setInterval(close,1000);
			function close(){
				count--;
				if(count==0){
					ad.style.display="none";
				}
			}
		</script>
	</body>
</html>

7.5s页面自动跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="pp">5秒自动跳转至百度首页</p>
		<script type="text/javascript">
			var pp=document.getElementById("pp");
			var count=5;
			setTimeout(tioazhuan,1000);//没秒循环操作一次，达到倒计时效果
			function tioazhuan(){
				count--;
				if(count<=0){
					window.location.href="http://www.baidu.com";
				}else{
					setTimeout(tioazhuan,1000);//函数自调用——递归
					pp.innerHTML=count+"秒自动跳转至百度首页";
				}
			}
		</script>
	</body>
</html>

8.长图滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width:600px;
				height: 500px;
				border: 3px solid #333;
				margin:100px auto;
				overflow: hidden;
				position: relative;
			}
			span{
				width:600px;
				height:250px;
				position: absolute;
			}
			#imgs{
				position: absolute;
			}
			#tops{
				top:0;
			}
			#bottoms{
				top:250px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/QQ图片20190402085835.jpg" id="imgs"/>
			<span id="tops"></span>
			<span id="bottoms"></span>
		</div>
		<script type="text/javascript">			
			var box=$id("box");
			var tops=$id("tops");
			var bottoms=$id("bottoms");
			var imgs=$id("imgs");
			var num=0;
			var timer=null;	
			mouseover(tops,upMove);
			mouseover(bottoms,downMove);
			function $id(id){
				return document.getElementById(id);
			}
			function mouseover(name,fun){
				name.function(){				
					timer=setInterval(fun,1);				
				}
				name.function(){
					clearInterval(timer);
				}
			}			
			function downMove(){					
					if(num<=0){
						clearInterval(timer);
					}else{
						num--;
						imgs.style.top=-num+"px";
					}
				}
			function upMove(){
					if(num>=(1571-500)){
						clearInterval(timer);
					}else{						
						num++;
						imgs.style.top=-num+"px";
					}
				}					
		</script>
	</body>
</html>

9.自己写的一个小练习：点击按钮出现相应盒子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			button{
				width:80px;
				height:40px;
				display:block;
				float:left;
			}
			#father{
				clear: both;
			}
			#father div{
				width: 78px;
				height:500px;
				border:1px solid #666;
				margin:10px 0;
				text-align: center;
				line-height: 100px;
				visibility: hidden;
				float:left;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			var body=document.getElementsByTagName("body")[0];			
			var colors=["red","blue","yellow","purple","LightPink","Crimson","DoderBlue","ForestGreen","DarkKhaki","BlanchedAlmond","DimGray"];
			var num=colors.length;
			for(var i=0;i<num;i++){
				var cBtn=document.createElement("button");
				cBtn.innerHTML=i+1;
				body.appendChild(cBtn);					
			}
			var fatherDiv=document.createElement("div");
			fatherDiv.setAttribute("id","father");
			body.appendChild(fatherDiv);			
			for(var i=0;i<num;i++){
				var cDiv=document.createElement("div");
				cDiv.innerHTML=i+1;
				fatherDiv.appendChild(cDiv);					
			}
			var btns=document.getElementsByTagName("button");
			var fatherDiv=document.getElementById("father");
			var dvs=fatherDiv.getElementsByTagName("div");
			for(var i=0;i<btns.length;i++){
				btns[i].index=i;
				btns[i].function(){					
					for(var j=0;j<btns.length;j++){
						btns[j].style.backgroundColor="";
						dvs[j].style.visibility="hidden";
						dvs[j].style.backgroundColor="";
					}
					this.style.backgroundColor=colors[this.index];
					dvs[this.index].style.visibility="visible";
					dvs[this.index].style.backgroundColor=colors[this.index];
				}
			}
		</script>
	</body>
</html>

10.获取字符串长度方法封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str="i am strong not 虚胖";
			function getStringLength(str){
				var sum=0;
				var code=0;
				for(var i=0;i<str.length;i++){
					code=str.charCodeAt(i);
					if(code>=0&&code<=127){
						sum++;
					}else{
						sum+=2;
					}
				}
				return sum;
			}
			var length=getStringLength(str);
			console.log(length);
		</script>
	</body>
</html>

11.查找字符位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		请输入字符串：<input type="text" id="txt1"/><br />
		请输入要查找的字符：<input type="text" id="txt2"/><br />
		<button id="btn1">从前面查找</button>
		<button id="btn2">从后面查找</button>
		<script type="text/javascript">
			function $id(id){return document.getElementById(id)}
			$id("btn1").function(){
				alert("从前面查找，下标是："+($id("txt1").value).indexOf($id("txt2").value));
			}
			$id("btn2").function(){
				alert("从后面查找，下标是："+($id("txt1").value).lastIndexOf($id("txt2").value));
			}
		</script>
	</body>
</html>

12.网址编码解码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str="https://hao.360.cn/?a1004";
			var bstr=encodeURIComponent(str);
			console.log(bstr);// https%3A%2F%2Fhao.360.cn%2F%3Fa1004
			var jstr=decodeURIComponent(bstr);
			console.log(jstr);// https://hao.360.cn/?a1004
		</script>
	</body>
</html>

13.三种保留两位小数的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num=12342342345.6788656;
			two(num);
			two1(num);
			two2(num);
			function two(num){
				var str=num.toString();
				var end=str.indexOf(".")+3;
				var strNew=str.substr(0,end);
				var numNew=Number(strNew);
				console.log(numNew);
			}
			function two1(num){
				var num1=parseInt(num*100);
				var num2=num1/100;
				console.log(num2);
			}
			function two2(num){
				var str=num.toFixed(2);
				var num1=Number(str);
				console.log(num1);//具有四舍五入功能
			}
		</script>
	</body>
</html>

14.案例：判断上传文件类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="file" id="files"/>
		<p id="pp"></p>
		<script type="text/javascript">
			var pp=document.getElementById("pp");
			var files=document.getElementById("files");
			files.function(){
				var filePath=this.value;
				var houzhui=filePath.substr(filePath.lastIndexOf(".")).toLocaleLowerCase();
				if(houzhui == ".jpg" || houzhui ==".png" || houzhui==".gif" ){
					pp.innerHTML="图片格式正确";
				}else{
					pp.innerHTML="图片格式不正确";
				}
			}
		</script>
	</body>
</html>

15.获取元素方式的封装

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div id="dv"></div>
		<div class="dv"></div>
		<div></div>
		<script type="text/javascript">
			function $(str){
				var firstLetter=str.charAt(0);
				var secound=str.substr(1);
				switch(firstLetter){
					case "#": 
						return document.getElementById(secound);
					case ".":
						return document.getElementsByClassName(secound);
					default:
						return document.getElementsByTagName(str);
				}
			}
			/*$("#dv").style.backgroundColor="red";
			$(".dv")[0].style.backgroundColor="yellow";
			$("div")[0].style.border="2px solid green";
			$("div")[1].style.border="2px solid green";
			$("div")[2].style.border="2px solid green";*/
			document.querySelector("#dv").style.backgroundColor="red";
			document.querySelector(".dv").style.backgroundColor="yellow";
			document.querySelector("div").style.border="2px solid green";
			document.querySelectorAll("div")[1].style.border="2px solid green";
			document.querySelectorAll("div")[2].style.border="2px solid green";
		</script>
	</body>
</html>

16.无缝滚动图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:600px;
				height:238px;
				border:2px solid #333;
				position: relative;
				margin:100px auto;
				overflow: hidden;
			}
			#box ul{				
				position: absolute;
				left:0;
				width:1800px;
			}
			#box li{
				list-style: none;
				float: left;				
			}
			#box li img{
				vertical-align: top;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
			</ul>
		</div>
		<script type="text/javascript">
			var uu=document.querySelector("ul");
			var num=0;
			var timer=null;
			timer=setInterval(scrool,20);
			function scrool(){
				num++;
				num<1200?uu.style.left=-num+"px":num=0;
			}
			uu.function(){
				clearInterval(timer);
			}
			uu.function(){
				timer=setInterval(scrool,20);
			}
		</script>
	</body>
</html>

17.匀速运动的盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			button{
				width:80px;
				height:40px;
				border-radius: 5px;
				background-color:deepskyblue;
				margin:5px;
			}
			#father{
				width:500px;
				height:500px;
				margin:10px;
				position: relative;
				border:2px solid red;
			}
			#son{
				width:100px;
				height:100px;
				background-color:yellow;
				position: absolute;
				top:0px;
				left:0;
			}
		</style>
	</head>
	<body>
		<button>开始</button>
		<button>暂停</button>
		<div id="father">
			<div id="son"></div>
		</div>
		<script type="text/javascript">
			var box=document.querySelector("#son");
			var btn1=document.querySelectorAll("button")[0];
			var btn2=document.querySelectorAll("button")[1];			
			var timer=null;
			var num=0;
			btn1.function(){				
				timer=setInterval(move,20);
			}
			btn2.function(){				
				clearInterval(timer);
			}			
			function move(){
				if(num>=400){
					clearInterval(timer);
				}else{
					num++;
					box.style.top=num+"px";
					box.style.left=num+"px";
				}				
			}
		</script>
	</body>
</html>

18.加速运动的盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				width:100px;
				height:100px;
				background-color:yellow;
				position: relative;
				left:0;
			}
		</style>
	</head>
	<body>
		<button>Move</button>
		<div id="box"></div>
		<script type="text/javascript">
			var dv=document.querySelector("div");
			var btn=document.querySelector("button");
			var leader=0;
			var target=1000;
			btn.function(){
				setInterval(move,30);
			}
			function move(){
				leader=leader+(target-leader)/10;
				dv.style.left=leader+"px";
			}			
		</script>
	</body>
</html>

19.重写轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:300px;
				height:238px;
				margin:auto;
				border:2px solid #333;
				position: relative;
				overflow: hidden;
			}
			#box ul{
				list-style: none;
				width:1500px;
				position: absolute;
				left:0;
			}
			#box ul li{
				float: left;
			}
			#box ul li img{
				vertical-align: top;
			}
			#fatherBox{
				width:500px;
				height:300px;
				margin:100px auto;
				position: relative;
			}
			button{
				width:80px;
				height:40px;
				background-color:lightskyblue;
				color:yellow;
				font-size:20px;
				font-weight: 700;
				position: absolute;
				top:90px;
			}
			button:nth-child(1){
				left: 20px;
			}
			button:nth-child(2){
				right: 20px;
			}
		</style>
	</head>
	<body>
		<div id="fatherBox">
			<button>上一张</button>
			<button>下一张</button>
			<div id="box">			
				<ul>
					<li><img src="img/1.jpg"/></li>
					<li><img src="img/2.jpg"/></li>
					<li><img src="img/3.jpg"/></li>
					<li><img src="img/4.jpg"/></li>
				</ul>
			</div>
		</div>		
		<script type="text/javascript">
			var btns=document.querySelectorAll("button");
			var uu=document.querySelector("ul");
			var num=0;
			btns[0].function(){
				if(num==900){
					num=0;
					uu.style.left="0px";
				}else{
					num+=300;
					uu.style.left=-num+"px";
				}				
			}
			btns[1].function(){
				if(num==0){
					num=900;
					uu.style.left="-900px";
				}else{
					num-=300;
					uu.style.left=-num+"px";
				}				
			}
		</script>
	</body>
</html>

20.缓动盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color: yellow;
				position: relative;
			}
		</style>
	</head>
	<body>
		<button>开始移动</button>
		<div id="box"></div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var btn=document.querySelector("button");
			var leader=0;
			var target=500;
			btn.function(){
				setInterval(function(){
					leader=leader+(target-leader)/20;
					box.style.left=leader+"px";
				},20);
			}			
		</script>
	</body>
</html>

21.焦点轮播图案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			img{
				vertical-align: top;
			}
			#box{
				width:590px;
				height:470px;
				margin:100px auto;
				border: 2px solid #333;				
				padding:10px;
				position: relative;
			}
			#content{
				width:100%;
				height:100%;
				overflow: hidden;
			}
			ul,ol{
				list-style: none;
			}
			ul{
				width:1000%;
				position: relative;
			}
			ul li{
				float:left;
			}
			ol{
				position: absolute;
				left:50%;
				bottom:15px;
			}
			ol li{
				width:40px;
				height:40px;
				background-color: white;
				text-align: center;
				line-height: 40px;
				border-radius: 20px;
				border:1px solid #333;
				float: left;
				margin-right:5px;
			}
			.bgc{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="content">
				<ul>
					<li><img src="img/1.jpg"/></li>
					<li><img src="img/2.jpg"/></li>
					<li><img src="img/3.jpg"/></li>
					<li><img src="img/4.jpg"/></li>
				</ul>
			</div>
			<ol>
				<li class="bgc">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var uu=box.children[0].children[0];
			var oo=box.children[1];
			var lis=oo.children;
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){					
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
					}
					this.className="bgc";
					target=-590*(this.index);
				}				
			}
			var leader=0;
			var target=0;
			setInterval(function(){
				leader=leader+(target-leader)/20;
				uu.style.left=leader+"px";
			},20);
		</script>
	</body>
</html>

22.点击切换案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:590px;
				height:470px;
				margin:100px auto;
				border: 2px solid #333;				
				padding:10px;
				position: relative;
			}
			#content{
				width:100%;
				height:100%;
				overflow: hidden;
			}			
			ul{
				width:1000%;
				position: relative;
				list-style: none;
			}
			ul li{
				float:left;
			}
			ol{
				position: absolute;
				right:10%;
				bottom:15px;
				list-style: none;
			}
			ol li{
				width:40px;
				height:40px;
				background-color: white;
				text-align: center;
				line-height: 40px;
				border-radius: 20px;
				border:1px solid #333;
				float: left;
				margin-right:5px;
			}
			.bgc{
				background-color: yellow;
			}
			button{
				position: absolute;
				top:0;
				background-color:#666;
				opacity: .4;
				color:#ccc;
				height:80px;
				width:40px;
				font-size:30px;
				top:50%;
				margin-top:-40px;
				display: none;
			}
			#left{
				left:20px;
			}
			#right{
				right: 20px;
			}
		</style>
	</head>
	<body>		
		<div id="box">			
			<div id="content">
				<ul></ul><!--存放照片-->
			</div>
			<ol></ol><!--存放小圆点-->
			<button id="left"><</button>
		    <button id="right">></button>
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var uu=box.children[0].children[0];
			var oo=box.children[1];			
			var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
			for(var i=0;i<arr.length;i++){//创建ul中的li及图片列表
				var cImg=document.createElement("img");
				cImg.src=arr[i];
				var cLi=document.createElement("li");
				cLi.appendChild(cImg);
				uu.appendChild(cLi);
			}
			var uulis=uu.children;
			for(var i=0;i<uulis.length;i++){//创建ol中的小圆点列表
				var cLi=document.createElement("li");
				cLi.innerHTML=i+1;
				oo.appendChild(cLi);				
			}			
			var lis=oo.children;
			lis[0].className="bgc";			
			var left=document.getElementById("left");
			var right=document.getElementById("right");	
			box.function(){//鼠标经过，显示按钮
				left.style.display="block";
				right.style.display="block";
			}
			box.function(){//鼠标离开隐藏按钮
				left.style.display="none";
				right.style.display="none";
			}
			left.function(){//左边鼠标点击右移动							
				target+=590;
				var i=-target/590;
				if(i<=0){
					i=0;
				}
				for(var j=0;j<lis.length;j++){
					lis[j].className="";
				}
				lis[i].className="bgc";	
			}
			right.function(){//右边鼠标点击左移动				
				target-=590;
				var i=-target/590;
				if(i>=3){
					i=3;
				}
				for(var j=0;j<lis.length;j++){
					lis[j].className="";
				}
				lis[i].className="bgc";	
			}
			for(var i=0;i<lis.length;i++){
				lis[i].index=i;
				lis[i].function(){//鼠标经过小圆点，图片移动到对应的那张					
					for(var j=0;j<lis.length;j++){
						lis[j].className="";
					}
					this.className="bgc";
					target=-590*(this.index);
				}				
			}
			var leader=0;
			var target=0;
			setInterval(function(){//定时器，实现动态移动效果
				leader=leader+(target-leader)/20;
				if(target>=0){
					target=0;
				}else if(target<=-(590*3)){
					target=-(590*3);
				}
				uu.style.left=leader+"px";				
			},20);				
		</script>
	</body>
</html>

23.使用鼠标跟随写的导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				background-color: #CCCCCC;
			}
			#box{
				width:500px;
				height:50px;
				border:1px #333 solid;
				margin:50px auto;
				background-color: white;
				position: relative;
			}
			ul{
				list-style: none;
				position: absolute;
			}
			ul li{
				float: left;
				width:100px;
				height: 50px;
				text-align: center;
				line-height: 50px;	
			}
			span{
				display: inline-block;
				background: url(img/5.png) no-repeat;
				width:100px;
				height:50px;
				position: absolute;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div id="box">	
			<span></span>
			<ul>				
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
				<li>首页</li>
			</ul>				
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var span=document.getElementsByTagName("span")[0];
			var flag=0;
			for(var i=0;i<lis.length;i++){
				lis[i].function(){
					target=this.offsetLeft;
				}
				lis[i].function(){
					target=flag;
				}
				lis[i].function(){
					flag=this.offsetLeft;
				}
			}
			var leader=0;
			var target=0;
			setInterval(function(){
				leader=leader+(target-leader)/10;
				span.style.left=leader+"px";
			},20);
		</script>
	</body>
</html>

24.移动的猴子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:100px;
				height:100px;
				position: relative;
			}
			img{
				width:100px;
				height:100px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/猴子.gif"/>
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			document.function(event){
				var event = event||document.event;
				targetX=event.clientX-box.offsetWidth/2;
				targetY=event.clientY-box.offsetWidth/2;
			}
			var leaderX=0,leaderY=0,targetX=0,targetY=0;
			setInterval(function(){
				leaderX=leaderX+(targetX-leaderX)/10;
				leaderY=leaderY+(targetY-leaderY)/10;
				box.style.left=leaderX+"px";
				box.style.top=leaderY+"px";
			},20);
		</script>
	</body>
</html>

恋风（微信）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习第三周总结

1.日期对象内置对象，JS中有很多内置对象 Math Array Date Vuevar date=new Date();// 调用的是系统时间，如果运行程序的电脑时间改了，获取到的时间也会跟着变getTime，获得到的毫秒数1秒等于1000毫秒从1970年至今的毫秒数2038年问题getFullYear，获取年份当前年份getMonth，获取月份 0-11月getDa...
复制链接

扫一扫