JS定时器与运算符详解-CSDN博客

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

1.昨天内容回顾

内置对象
- 日期对象 Date();
- 必须通过new才能使用
- get.time(); 获取的是从1970年1月1日开始到现在的毫秒数
- 年月日时分秒、星期的获取
- 案例练习：
  - 简单的日历年月日星期的获取
  - 数字时钟时分秒的获取
  - 倒计时距离未来某个时间还有多少天多少小时多少分钟多少秒
  - 钟表案例用到了定时器 CSS3中的旋转度数计算
定时器
- setInterval（函数，间隔时间）；

2.短信验证案例

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

<!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>

3.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>

4.另一个定时器

setTimeout(函数，间隔时间)；
这个定时器是间隔时间之后执行函数，只执行一次，和定时炸弹类似
setInterval定时器是每间隔多少秒就执行一次，一直循环，除非清除定时器
案例：5s之后页面自动跳转
- window.location.href=“url”;//BOM里面内容
- setTimeout可以实现倒计时

<!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>

5.arguments

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

6.长图滚动

<!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>

7.运算符

一元运算符正号、符号、++、–
二元运算符 +、-、*、/、%
三元运算符表达式？真：假
逻辑运算符 &&、||、！
关系运算符 >、<、>=、<=、==、===、！=、！==
优先级顺序
- ()括号
- ！非、-符号++、–
- *、/、%
- +、-
- >、<、>=、<=
- ==、===、！=、！==
- &&
- ||
- 三元运算符
五种假：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

小问题：getAttribute只能获取写在html元素行内的属性值，写在CSS中的属性是获取不到的。

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

<!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>