关于定时器(setInterval)的简单运用
第一个例子：div动起来
讲解：通过随机函数来改变div到父级元素左边的距离和到上面的距离
//样式
#dv{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
var timer;
my$("btn1").onclick = function () {
//先清除，在添加定时器
clearInterval(timer);
timer = setInterval(function () {
//生成随机数
var x = parseInt(Math.random() * 400 + 1);//1到100随机数
var y = parseInt(Math.random() * 500 + 1);
//设置元素的top值和left值
my$("dv").style.left = x + "px";
my$("dv").style.top = y + "px";
var arr = ["red","green","blue","pink","black","orange","yellow","purple","cyan","gold","grey","hotpink","white"];
var color = parseInt(Math.random()*13);
my$("dv").style.backgroundColor = arr[color];
},200)
my$("btn2").onclick = function () {
clearInterval(timer);
}
}
function my$(id){
return document.getElementById(id);
}
第二个例子：时钟
讲解：通过系统自带的时间函数创建对象，获取当前系统的时间，再用定时器每过1秒执行相应的函数
*{
margin: 0;
padding: 0;
}
body{
background-color: pink;
color: red;
text-align: center;
}
div{
width: 700px;
line-height: 100px;
margin: 50px auto;
font-size: 50px;
border: 1px solid #cccccc;
}
button{
width: 70px;
height: 70px;
background-color: cyan;
border: none;
border-radius: 50%;
font-size: 24px;
outline: none;
cursor: pointer;
}
//定义时间的函数
function clock() {
//1.获取当前的时间对象
var dt = new Date();
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var day = dt.getDate();
var week = dt.getDay();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
var weekArr = ["天","一","二","三","四","五","六"];
var dayArr = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
//封装补位的函数
function bu(i) {
i = i < 10 ? "0"+ i : i;
return i;
}
my$("dv1").innerHTML = year + "年" + dayArr[month-1] + "月" + bu(day) + "日 星期" + weekArr[week];
my$("dv2").innerHTML = bu(h) + ":" + bu(m) + ":" + bu(s);
}
clock();
//添加定时器
var t = setInterval(clock,1000);
//点击清除
my$("btn1").onclick = function () {
clearInterval(t);
}
//点击继续
my$("btn2").onclick = function () {
clearInterval(t);
t = setInterval(clock,1000);
}
function my$(id){
return document.getElementById(id);
}
第三个例子：倒计时
讲解：通过date.getTime()获取到1970年01月01日到现在的毫秒数，然后自己设置一个将要截止的时间，再将他们相减就能得到现在到你设置的截止时间的毫秒数，再一一转化为时分秒
:
:
function clock() {
my$("bd").style.fontSize = "40px";
//获取当前的时间
var dt = new Date();
//2.设置一个截至的时间
var end = new Date("2019/01/25 17:30:00");
//3.转化为毫秒
var now = dt.getTime();
var ends = end.getTime();
//4.获取时间差
var cha = ends - now;
//5.转化为为秒
var miao = cha / 1000;
//时间小于10时，在时间前面拼接一个0
function bu(i) {
i = i < 10 ? "0"+ i : i;
return i;
}
//6.判断时间差
if (miao > 0){
//转化为时分秒
my$("span1").innerHTML = bu(Math.floor(miao / 3600));
my$("span2").innerHTML = bu(Math.floor(miao % 3600 / 60));
my$("span3").innerHTML = bu(Math.floor(miao % 60));
}else {
clearInterval(t);
my$("bd").innerHTML = "放假了，春节到了！";
}
}
var t = setInterval(clock,1000);
function my$(id){
return document.getElementById(id);
}
第四个例子：简单的点名系统
讲解：通过随机函数随机改变你数组中人名的索引，改变其背景颜色，但在这之前，你先要通过循环将所有名字所在的标签改为统一的的颜色，这样随机改变的就是你随机索引所在的标签颜色，而不会影响到其它标签的颜色
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
background-color: #f0f8ff;
}
h2{
margin-top: 50px;
}
#dv1{
width: 870px;
height: 400px;
margin: 0 auto;
}
#dv1 #s1{
display: block;
text-align: right;
margin-right: 10px;
}
#dv1 #ul1{
width: 870px;
height: 95px;
margin-top: 80px;
}
#dv1 ul li{
list-style: none;
width: 100px;
height: 28px;
line-height: 28px;
background-color: #faebd7;
float: left;
margin-left: 8px;
margin-top: 6px;
}
#btn1,#btn2,#btn3{
width: 100px;
height: 30px;
border: 1px solid #eee;
background-color: #e5e5e5;
outline: none;
cursor: pointer;
margin-left: 5px;
}
#btn3{
background-color: #eee;
color: #2f0c00;
position: absolute;
top:0px;
left: 380px;
}
#dv2{
width: 215px;
height: 30px;
margin: 30px auto;
position: relative;
}
随机点名系统