1、实现点击按钮，滚动条走动和百分比走动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条滚动</title>
<style type="text/css">
#loading {
height: 80px;
width: 800px;
background-color: white;
border: 2px solid black;
}
#start1{
font-size: 20px;
width: 120px;
font-family: "微软雅黑";
font-weight:bold;
}
#loading1{
height: 80px;
background-color: green;
width: 0%;
}
</style>
</head>
<body>
<div id="loading">
<div id="loading1">
</div>
</div>
<button id="start1">开始</button>
<p id="p1">0</p>
</body>
</html>
<script type="text/javascript">
var odiv1=document.getElementById('loading1')
var obut=document.getElementById('start1')
var op=document.getElementById('p1')
var i=0
var str1=''
obut.onclick=function (){
var timer=setInterval(function () {
i++
if (i==100){
clearInterval(timer)
}
str1=i+'%'
odiv1.style.width=str1
op.innerHTML=str1
if (i>=100){
alert('加载完成')
clearInterval(timer)
i--
}
},50)
}
</script>
2、实现秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秒表</title>
<style type="text/css">
#colock01{
height: 500px;
width: 100%;
background-color: pink;
font-size: 300px;
text-align: center;
}
#colock02 button{
height: 80px;
width: 200px;
margin-left: 70px;
font-family: "微软雅黑";
font-size: 40px;
}
#colock02{
margin-top: 80px;
text-align: center;
}
</style>
</head>
<body>
<div id="colock01">00:00</div>
<div id="colock02">
<button id="colock03" onclick="demo1()">开始</button>
<button id="colock04" onclick="stop()">暂停</button>
<button id="colock05" onclick="clear1()">重置</button>
</div>
</body>
</html>
<script type="text/javascript">
// 时间
var i=0
var time2=0
var odiv=document.getElementById('colock01')
// 开始计数，调用demo1
function demo1(){
document.getElementById('colock03').disabled=true
timer=setInterval(demo2,1000)
function demo2(){
i++
if (i<60){
if(i<10){
time2='00:'+'0'+i
}
else{
time2='00:'+i
}
}
else{
var fen=0
var miao=0
fen=parseInt(i/60)
if (fen<10){
fen='0'+fen
}
miao=parseInt(i%60)
if (miao<10){
miao='0'+miao
}
time2=fen+':'+miao
}
odiv.innerHTML=time2
}
}
// 暂停
var odiv1=document.getElementById('colock01')
function stop(){
document.getElementById('colock03').disabled=false
clearInterval(timer)
}
// 重置
var odiv2=document.getElementById('colock01')
function clear1(){
i=0
time2=0
odiv2.innerHTML='00:00'
}
</script>
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 x ,d, day, s=''
var x =new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六")
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>
5、短信倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>短信计时</title>
<style type="text/css">
#obut1{
background-color: plum;
}
</style>
</head>
<body>
<button id="obut1">点击发送短信</button>
</body>
</html>
<script type="text/javascript">
var str1=''
var obut2=document.getElementById('obut1')
obut2.onclick=function(){
var i=6
obut2.disabled=true
var timer=setInterval(function(){
i--
obut2.style.backgroundColor='red'
str1=i+'s后可重新发送'
obut2.innerHTML=str1
if (i<=0){
clearInterval(timer)
obut2.innerHTML='点击发送短信'
obut2.disabled=false
obut2.style.backgroundColor='plum'
}
},1000)
}
</script>
网友评论