1沛鸵、實(shí)現(xiàn)點(diǎn)擊按鈕，滾動(dòng)條走動(dòng)和百分比走動(dòng)
2放可、實(shí)現(xiàn)秒表
3谒臼、實(shí)現(xiàn)文字時(shí)鐘
4朝刊、處理className兼容耀里，自己實(shí)現(xiàn)getByClassName
5、短信倒計(jì)時(shí)
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>滾動(dòng)條效果</title>
<style>
div {
width: 500px;
height: 100px;
border: 1px dashed black;
}
#nei {
background-color: pink;
width: 0px;
border: none;
}
</style>
</head>
<body>
<h1>滾動(dòng)條</h1>
<button id="btn">點(diǎn)擊我</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這個(gè)div的寬度從0慢慢的變成500即可
var timer = setInterval(function () {
i += 2
// 將i設(shè)置為nei div的寬度
onei.style.width = i + 'px'
// 時(shí)刻修改span里面的內(nèi)容
oper.innerHTML = (i / 5) + '%'
// 判斷i有沒(méi)有達(dá)到div寬度
if (i == 500) {
// 銷(xiāo)毀定時(shí)器
clearInterval(timer)
obtn.disabled = false
}
}, 10)
}
</script>
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拾氓、實(shí)現(xiàn)秒表-->
<div id="d1">00:00</div>
<div id="d2">
<button id="btn1">開(kāi)始</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
// 開(kāi)始函數(shù)
ostart.onclick = function () {
// 周期性定時(shí)器一直在修改div的值
timer = setInterval(function () {
i++
// 根據(jù)i計(jì)算前面的值和后面的值 228 02:28
first = parseInt(i / 100)
second = i % 100
// 將i設(shè)置為div后面的值
odiv.innerHTML = buling(first) + ':' + buling(second)
}, 10)
}
// 暫停
ostop.onclick = function () {
clearInterval(timer)
}
// 重置函數(shù)
oreset.onclick = function () {
// 清掉定時(shí)器
clearInterval(timer)
// 計(jì)數(shù)器清零
i = 0
// 顯示也清零
odiv.innerHTML = '00:00'
}
function buling(number) {
if (number < 10) {
return '0' + number
}
return number
}
</script>
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>文字時(shí)鐘</title>
</head>
<body>
<h1 id="lala"></h1>
</body>
</html>
<script>
var oh = document.getElementById('lala')
setInterval(function () {
// 一直修改oh的內(nèi)容
var od = new Date()
// 獲取年份
var year = od.getFullYear()
// 獲取月份
var month = od.getMonth() + 1
// 獲取日期
var day = od.getDate()
// 獲取星期幾
var weekday = change_weekday(od.getDay())
// 獲取小時(shí)
var hour = od.getHours()
// 獲取分鐘
var minute = od.getMinutes()
// 獲取秒數(shù)
var second = od.getSeconds()
oh.innerHTML = '當(dāng)前時(shí)間為:' + year + '年' + month + '月' + day + '號(hào) ' + 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
<!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>短信倒計(jì)時(shí)</title>
</head>
<body>
<button id="btn" style="width:400px; height:100px; font-size:50px;">點(diǎn)擊發(fā)送短信</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之后重新發(fā)送'
// 判斷定時(shí)器何時(shí)銷(xiāo)毀
if (i == 0) {
clearInterval(timer)
obtn.innerHTML = '點(diǎn)擊發(fā)送短信'
obtn.disabled = false
}
i--
}, 1000)
}
</script>
5
<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>處理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) {
// 首先找到所有的標(biāo)簽
var abiaos = obj.getElementsByTagName('*')
// 定義一個(gè)數(shù)組冯挎，用來(lái)保存符合要求的節(jié)點(diǎn)對(duì)象
var arr = []
// 遍歷每一個(gè)標(biāo)簽，將標(biāo)簽的內(nèi)容得到
for(var i = 0; i < abiaos.length; i++) {
// 得到當(dāng)前對(duì)象的class
var leiming = abiaos[i].className
// 將leiming這個(gè)字符串按照空格切割
var arr1 = leiming.split(' ')
// 遍歷所有的類(lèi)名咙鞍，判斷有沒(méi)有classname, 有的話(huà)就要這個(gè)節(jié)點(diǎn)房官，沒(méi)有就不要這個(gè)節(jié)點(diǎn)
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>
