1、实现点击按钮，滚动条走动和百分比走动
<title>计数器</title>
<style>
#div0{
width: 150px;
height: 20px;
border: 2px dotted black;
}
</style>
</head>
<body>
<button id="b1" onclick="work()">
进度条
</button>
<div id = 'div0'><div id="div1" style="width: 150px;height: 20px;"></div></div>
<div id="div2">0%</div>
</body>
</html>
<script>
var obtn = document.getElementById('b1')
var odiv0 = document.getElementById('div1')
var odiv = document.getElementById('div2')
var timer = null
var i = 0
function work() {
//禁用一个按钮
obtn.disabled = true
timer = setInterval(function () {
i++
odiv.innerHTML = i+'%'
odiv0.style.width = 1.5*i+'px'
// console.log(i)
odiv0.style.backgroundColor = 'green'
if(i == 100){
//此处不能用this
i = 0
clearInterval(timer)
obtn.disabled = false
}
}, 100)
}
</script>
结果
11.gif
2、实现秒表
<title>秒表</title>
<style>
div {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1">00:00</div>
<button onclick="start()">开始</button>
<button onclick="must()">暂停 </button>
<button onclick="end()">重置</button>
</body>
</html>
<script>
var odiv = document.getElementById('div1')
var timer = null
var i = 0
var j = 0
function start() {
timer = setInterval(function () {
i++
odiv.innerHTML = '0'+j+':'+ i
if (i == 100){
i = 0
j++
odiv.innerHTML = '0'+j+':'+ i
}
}, 10)
}
function must() {
clearInterval(timer)
}
function end(){
var i = 0
var j = 0
timer = setInterval(function () {
i++
odiv.innerHTML = '0'+j+':'+ i
if (i == 100){
i = 0
j++
odiv.innerHTML = '0'+j+':'+ i
}
}, 10)
}
</script>
结果
12.gif
3.文字时钟
<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>
4、处理classname兼容
<title>处理classname兼容</title>
</head>
<body>
<div id="tang">
<div class="song yuan qing"></div>
<div class="song"></div>
<div class="ming"></div>
</div>
<div class="song"></div>
<div class="song"></div>
</body>
</html>
<script>
// var adivs = document.getElementsByClassName('song')
var odiv = document.getElementById('tang')
// var adivs = odiv.getElementsByClassName('song')
// console.log(adivs)
//*
function getByClassName(obj, classname) {
// 首先找到所有的标签
var abiaos = obj.getElementsByTagName('*')
// 定义一个数组，用来保存符合要求的节点对象
var arr = []
// 遍历每一个标签，将标签的内容得到
for(var i = 0; i < abiaos.length; i++) {
// 得到当前对象的class
var leiming = abiaos[i].className
// 将leiming这个字符串按照空格切割
var arr1 = leiming.split(' ')
// 遍历所有的类名，判断有没有classname, 有的话就要这个节点，没有就不要这个节点
for (var j = 0; j < arr1.length; j++) {
if (arr1[j] == classname) {
arr.push(abiaos[i])
}
}
}
return arr
} //*/
console.log(getByClassName(odiv, 'song'))
// console.log('song'.split(' '))
</script>
5、短信倒计时
<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>
