js
1.实现点击按钮，滚动条走动和百分比走动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
.hehe{
height: 20px;
width: 0;
background:red;
position: relative;
top: 2px;
left:0;
border-radius: 2px;
overflow: hidden;
line-height: 25px;
}
#xixi{
height: 25px;
width:500px;
border: 1px solid black;
background-color: white;
}
</style>
</head>
<body>
<h3 style="margin-left: 200px;">进度条</h3>
<div id='xixi'>
<div class="hehe">
</div>
</div>
<div id="lala">
0
</div>
<button id='nana'>开始</button>
<button id='haha'>暂停</button>
</body>
</html>
<script>
var timer=null
var odiv=document.getElementById('lala')
var i=0
var owidth=0
var obutton=document.getElementById('nana')
var obutton1=document.getElementById('haha')
obutton.onclick=function(){
clearInterval(timer)
timer=setInterval(function(){
i++
odiv.innerHTML=i+"%"
owidth=i*5
console.log(owidth)
document.getElementsByClassName('hehe')[0].style.width=owidth+"px";
if(i==100){
clearInterval(timer)
}
},100)
}
obutton1.onclick=function(){
clearInterval(timer)
}
</script>
效果图
image.png
2实现秒表功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秒表</title>
<style>
div{
width: 100%;
height: 300px;
font-size: 200px;
background-color: aqua;
text-align: center;
}
</style>
</head>
<body>
<div id='dudu'>
00:00:00
</div>
<button style="margin-left:560px ;" id="xiexie">开始</button>
<button id="buxie">暂停</button>
<button id="haixie">重置</button>
</body>
</html>
<script>
var obutton=document.getElementById('xiexie')
var timer=null
var hour=0
var min=0
var sec=0
var odiv=document.getElementById('dudu')
obutton.onclick=function(){
clearInterval(timer)
timer=setInterval(function(){
sec++
var str_hour=hour;
var str_min=min;
var str_sec=sec;
if(hour<10){
str_hour="0"+hour;
}
if(min<10){
str_min="0"+min;
}
if(sec<10){
str_sec="0"+sec;
}
var time=str_hour+':'+str_min+':'+str_sec
odiv.innerHTML=time;
if(sec>99){
sec=0;
min++;
}
if(min>59){
min=0;
hour++;
}
},10)
}
var obutton1=document.getElementById('buxie')
obutton1.onclick=function(){
clearInterval(timer)
}
var obutton2=document.getElementById('haixie')
obutton2.onclick=function(){
hour=0
min=0
sec=0
clearInterval(timer)
odiv.innerHTML='00:00:00'
}
</script>
功能为分钟、秒数和毫秒数，其中毫秒数为最后一个计数单位乘10，其中的按钮也能实现作用
效果图
image.png
3实现文字时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字时钟</title>
</head>
<body>
<h2 id='lala'></h2>
</body>
</html>
<script>
var ss=0
var oh = document.getElementById('lala')
setInterval(function () {
// 一直修改oh的内容
var od = new Date()
// 获取年份
var year = od.getFullYear()
// 获取月份
var month = od.getMonth() + 1
// 获取日期
var day = od.getDate()
// 获取星期几
var weekday = change_weekday(od.getDay())
// 获取小时
var hour = od.getHours()
// 获取分钟
var minute = od.getMinutes()
// 获取秒数
var second = od.getSeconds()
if(second<10){
ss="0"+second
}
if(second>=10){
ss=second
}
oh.innerHTML = '当前时间为:' + year + '年' + month + '月' + day + '号 ' + weekday + ' ' + hour + ':' + minute + ':' + ss
}, 1000)
function change_weekday(number) {
switch (number) {
case 0:
return '星期天'
break;
case 1:
return '星期一'
break;
case 2:
return '星期二'
break;
case 3:
return '星期三'
break;
case 4:
return '星期四'
break;
case 5:
return '星期五'
break;
case 6:
return '星期六'
break;
}
}
</script>
其效果为
image.png
时间是动态的
4短信倒计时功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>短信倒计时</title>
</head>
<body>
<button id="btn" style="width:300px; height:100px; font-size:30px;background-color: #FFFF00;">点击发送短信</button>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
this.disabled = true
var i = 60
var timer = setInterval(function () {
obtn.innerHTML = i + 's之后重新发送'
// 判断定时器何时销毁
if (i == 0) {
clearInterval(timer)
obtn.innerHTML = '点击发送短信'
obtn.disabled = false
}
i--
}, 1000)
}
</script>
效果
image.png
点击后
image.png
读秒为完成前无法再次点击
网友评论