js定时器:
1.倒计时定时器:
setTimeout:(函数体,间隔时间(毫秒为单位)). 经常写在函体内;
2.循环定时器:
setInterval:(函数体,间隔时间),常写在函数体外;
倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
3.清除定时器
clearTimeout(对象)清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
4.定时器案例:
(1)打字机案例:
<!--分析:
1.创建页面结构
2. 加载页面元素 body中 onload:函数体 ;
3.创建数组存储数据 ,定义x(数组索引)
4.获取页面元素(div);
5.将数组中的数据添加到div中 innHTML=arr[a];这样添加数据,将原数据掩盖 //+将数据累计在一起
6.通过索引循环添加数据
7.添加定时器间隔多少秒添加一个数据 (setTimeout)
8.判断索引值舒服大于数组的长度, 清除定时器,添加循环定时器的闪(setInterval)
9.获取span
10.判断|是否显示 display:block, 隐藏display:none,添加循环定时器 (setIndterval)-->
<script type="text/javascript">
//3
var x=0;
var arr=['我','曾','一','直','寻','找','自','我',',','而','我','竟','在','不','知','不','觉','中','迷','失','自','我','!'];
function load(){
//4
div_01=document.getElementById('div1');
//5
div_01.innerHTML+=arr[x];
//6
x++;
//7
var time=setTimeout('load()',200)
if(x>=arr.length){
clearTimeout(time);
setInterval(shan,200);
}
function shan(){
var shan1=document.getElementById('span1');
//9
console.log(shan1)
//10
if(shan1.style.display=='block'){
shan1.style.display='none';
}else{
shan1.style.display='block';
}
}
//10
//setInterval('shan()',200)
}
</script>
</head>
<!--2-->
<body onload="load()">
<!--1-->
<div id="div1" style="float: left; font-family: 阿美简体;">
</div>
<span id="span1">
<label style="color: red; font-size: 15px; font-family: 阿美简体;">|</label>
</span>
</body>
(2)提交倒计时:
<!--1.创建页面结构
2.获取页面按钮
3.给按钮添加点击事件
4.给事件设置处理程序函数(调用函数)
5.函数体内设置倒计时的定时器 setTimeout-->
<button id="btn" onclick="test()">获取验证码</button>
<script type="text/javascript">
var num=5;
function test(){
num--;
btn.innerHTML=num+'s后获取';
var time=setTimeout('test()',1000);
if (num<=0) {
clearTimeout(time);
btn.innerHTML='获取验证码';
num=5;
}
}
</script>
</body>
知识点补充:
1.表单提交数据中 :
get提交数据:会将用户的数据显示在url地址栏中,不安全,并且提交的数据量小,不能超过255个字符;
post提交数据:不会将用户的数据显示url地址栏中,安全性高,并且提交的数据量大;
2.CSS样式:
borderRadius:圆角边框
boxShadow:(水平偏移量,处长偏移量,模糊程度,模糊颜色)向框添加一个或多个阴影
opacity:(0-1)设置元素的不透明级别 ; 从 0.0 (完全透明)到 1.0(完全不透明)
3.绑定事件调用有名函数;
<script type="text/javascript">
var btn_0=document.getElementsByClassName('btn0')[0];
btn_0.onclick=eee;
function eee(){
alert('这是通过绑定事件调用有名函数')
}
</script>