1.滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动条效果</title>
<style>
div {
width: 500px;
height: 100px;
border: 1px dashed black;
}
#nei {
background-color: pink;
width: 0px;
border: none;
}
</style>
</head>
<body>
<h1>滚动条</h1>
<button id="btn">点击我</button>
<br><br><br>
<div>
<div id="nei"></div>
</div>
<span id="per">0%</span>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
this.disabled = true
var onei = document.getElementById('nei')
var oper = document.getElementById('per')
i = 0
// 将#nei这个div的宽度从0慢慢的变成500即可
var timer = setInterval(function () {
i += 2
// 将i设置为nei div的宽度
onei.style.width = i + 'px'
// 时刻修改span里面的内容
oper.innerHTML = (i / 5) + '%'
// 判断i有没有达到div宽度
if (i == 500) {
// 销毁定时器
clearInterval(timer)
obtn.disabled = false
}
}, 10)
}
</script>
image.png
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: pink;
}
#d2{
height: 200px;
width: 100%;
background-color: mediumspringgreen;
}
button{
font-size: 50px;
border-radius: 10px;
color: purple;
width: 150px;
position: relative;
margin-left: 195px;
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>
// 前面是秒 后面是10ms
var ostart = document.getElementById('btn1')
var ostop = document.getElementById('btn2')
var oreset = document.getElementById('btn3')
var odiv = document.getElementById('d1')
var timer = null
var i = 0
// 开始函数
ostart.onclick = function () {
// 周期性定时器一直在修改div的值
timer = setInterval(function () {
i++
// 根据i计算前面的值和后面的值 228 02:28
first = parseInt(i / 100)
second = i % 100
// 将i设置为div后面的值
odiv.innerHTML = buling(first) + ':' + buling(second)
}, 10)
}
// 暂停
ostop.onclick = function () {
clearInterval(timer)
}
// 重置函数
oreset.onclick = function () {
// 清掉定时器
clearInterval(timer)
// 计数器清零
i = 0
// 显示也清零
odiv.innerHTML = '00:00'
}
function buling(number) {
if (number < 10) {
return '0' + number
}
return number
}
</script>
image.png
3.文字时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字时钟</title>
</head>
<body>
<h1 id="lala"></h1>
</body>
</html>
<script>
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()
oh.innerHTML = '当前时间为:' + year + '年' + month + '月' + day + '号 ' + weekday + ' ' + hour + ':' + minute + ':' + second
}, 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>短信倒计时</title>
</head>
<body>
<button id="btn" style="width:400px; height:100px; font-size:50px;">点击发送短信</button>
</body>
</html>
<script>
var obtn = document.getElementById('btn')
obtn.onclick = function () {
this.disabled = true
var i = 5
var timer = setInterval(function () {
obtn.innerHTML = i + 's之后重新发送'
// 判断定时器何时销毁
if (i == 0) {
clearInterval(timer)
obtn.innerHTML = '点击发送短信'
obtn.disabled = false
}
i--
}, 1000)
}
</script>
image.png
网友评论