前端定时器
2018-08-21 本文已影响0人
KingJX
1、实现点击按钮，滚动条走动和百分比走动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HomeWork1</title>
<style type="text/css">
#full{
width: 500px;
height: 50px;
background-color: whitesmoke;
border: 2px solid black;
}
#loading{
height: 50px;
width: 0%;
background-color: red;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<button id="btn">进度开始</button>
<div id="full">
<div id="loading"></div>
</div>
<p id="p1">0</p>
</body>
</html>
<script type="text/javascript">
var odiv = document.getElementById('loading')
var obtn = document.getElementById('btn')
var op = document.getElementById('p1')
var i = 0
var str1 = ''
obtn.onclick = function(){
var timer = setInterval(function () {
if(i>=100){
alert('已经加载完成')
clearInterval(timer)
i--
}
i++
if(i == 100){
clearInterval(timer)
}
str1 = i + "%"
odiv.style.width = str1
op.innerHTML = str1
}, 100)
}
</script>
01.gif
2、实现秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NO.2</title>
<style type="text/css">
#d1{
height: 300px;
width: 100%;
font-size: 300px;
color: #FF0000;
line-height: 300px;
text-align: center;
background-color: rgb(100,100,100);
}
#d2{
height: 200px;
width: 100%;
background-color: rgb(200,200,200);
}
button{
font-size: 50px;
border-radius: 10px;
color: purple;
width: 150px;
position: relative;
margin-left: 130px;
text-align: center;
}
</style>
</head>
<body>
<!--2、实现秒表-->
<div id="d1">00:00</div>
<div id="d2">
<button id="btn1">开始</button>
<button id='btn2'>暂停</button>
<button id="btn3">重置</button>
</div>
</body>
</html>
<script type="text/javascript">
var odiv1 = document.getElementById('d1')
var m = 0
var s = 0
var str1 = ''
var timer = null
var ob1 = document.getElementById('btn1')
var ob2 = document.getElementById('btn2')
var ob3 = document.getElementById('btn3')
ob1.onclick = function(){
timer = setInterval(function(){
s++
if(s==60){
m++
s = 0
}
if(m<10){
if(s<10&&m<10){
str1 = '0'+m+':0'+s
}else{
str1 = '0'+m+':'+s
}
}else{
if(s<10){
str1 = m+':0'+s
}else{
str1 = m+':'+s
}
}
odiv1.innerHTML = str1
},100)
}
ob2.onclick = function(){
clearInterval(timer)
}
ob3.onclick = function(){
str1 = '00:00'
odiv1.innerHTML = str1
}
document.getcla
</script>
02.gif
3、实现文字时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>no3</title>
<style type="text/css">
p{
width: 100%;
height: 300px;
font-size: 100px;
background-color: whitesmoke;
color: red;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<p id="p1"></p>
</body>
</html>
<script type="text/javascript">
var str1 = ''
function GetTimeTest(){
var d, s = '';
var c = ":";
d = new Date();
s += d.getHours() + c;
s += d.getMinutes() + c;
s += d.getSeconds();
return(s);
}
function DateDemo(){
var d, s = '';
d = new Date();
s += (d.getYear() + 1900)+ '年';
s += (d.getMonth() + 1) + "月";
s += d.getDate() + "日";
return(s);
}
function Week(){
var d, day, x, s = "";
var x = new Array("星期日", "星期一", "星期二");
var x = x.concat("星期三","星期四", "星期五");
var x = x.concat("星期六");
d = new Date();
day = d.getDay();
return(s += x[day]);
}
var op = document.getElementById('p1')
setInterval(function(){
str1 = DateDemo()+' '+Week()+' '+GetTimeTest()
op.innerHTML = str1
},1000)
</script>
03.gif
5、短信倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>no.5</title>
<style type="text/css">
button{
height: 100px;
width: 420px;
line-height: 100px;
text-align: center;
font-size: 50px;
border-radius: 20px;
background-color: blueviolet;
color: whitesmoke;
}
</style>
</head>
<body>
<button id="btn">点击发送短信</button>
</body>
</html>
<script type="text/javascript">
var num = 7
var obtn = document.getElementById('btn')
obtn.onclick = function(){
var str1 = ''
var timer = setInterval(function(){
obtn.disabled = 'disabled'
obtn.style.backgroundColor='red'
num--
str1 = num + 's后可重新发送'
obtn.innerHTML = str1
if(num == 0){
clearInterval(timer)
obtn.disabled = ''
num = 7
obtn.innerHTML ='点击发送短信'
obtn.style.backgroundColor='blueviolet'
}
},1000)
}
</script>
05.gif
