滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="butto" style="width: 50px;height: 30px;margin-bottom: 20px;">下载</button>
<div id="div4" style="width: 300px;height: 25px;border: 1px dashed black;">
<div id='div5' style=";width: 3px;height: 25px;background-color: green;"></div>
</div>
<div id="div6"></div>
</body>
</html>
<script type="text/javascript">
var obutto=document.getElementById('butto')
var odiv1=document.getElementById('div4')
var odiv2=document.getElementById('div5')
var odiv3=document.getElementById('div6')
var len=parseInt(odiv1.style.width)
console.log(len)
var mul=0
odiv3.innerHTML=Math.round(mul/len)+'%'
obutto.onclick=function(){
this.disabled=true
obutto.style.backgroundColor='darkgrey'
var timer=setInterval(function(){
mul+=len/100
odiv2.style.width=mul+'px'
odiv3.innerHTML=Math.round(100*mul/len)+'%'
if (mul>(len-len/100)){
clearInterval(timer)
console.log('超出')
mul=0
obutto.style.backgroundColor=''
obutto.disabled=false
}
},1000)
}
</script>
1.JPG
秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div7{
width: 100%;
height: 150px;
background-color: burlywood;
line-height: 150px;
text-align: center;
font-size: 70px;
}
#div8{
text-align: center;
margin-top:20px ;
}
#div8 button{
width: 70px;
height: 35px;
margin-right:30px ;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div7">00:00:000</div>
<div id='div8'>
<button id="butt1">开始</button>
<button id="butt2">暂停</button>
<button id="butt3">结束</button>
</div>
</body>
</html>
<script type="text/javascript">
var odiv1=document.getElementById('div7')
var obutton1=document.getElementById('butt1')
var obutton2=document.getElementById('butt2')
var obutton3=document.getElementById('butt3')
var timer=null
var sum=0
obutton1.onclick=function(){
if (sum==0){
odiv1.innerHTML='00:00:000'
}
timer=setInterval(function(){
var mu=0
var se=0
var mise=0
if(sum/60000){
mu=Math.floor(sum/60000)
se=Math.floor(sum%60000/1000)
mise=sum%60000%1000
}else if(sum/1000){
se=Math.floor(sum/1000)
mise=sum%1000
}else{
mise=sum%1000
}
if(mu<10){
mu='0'+mu
}
if(se<10){
se='0'+se
}
if(mise<10){
mise='0'+'0'+mise
}
else if(mise<100){
mise='0'+mise
}
var str=mu+':'+se+':'+mise
odiv1.innerHTML=str
sum+=4
},1)
}
obutton2.onclick=function(){
clearInterval(timer)
}
obutton3.onclick=function(){
clearInterval(timer)
sum=0
}
</script>
1.JPG
文字时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div9">
</div>
</body>
</html>
<script type="text/javascript">
var d=new Date()
var odiv=document.getElementById('div9')
var day1=''
if (d.getDay()==0){
day1='星期一'
}
if (d.getDay()==1){
day1='星期二'
}
if (d.getDay()==2){
day1='星期三'
}
if(d.getDay()==3){
day1='星期四'
}
if (d.getDay()==4){
day1='星期五'
}
if (d.getDay()==5){
day1='星期六'
}
if (d.getDay()==6){
day1='星期天'
}
function mul(number){
if(number<10){
return '0'+number
}
else{
return number
}
}
odiv.innerHTML='当前时间是：'+d.getFullYear()+'年'+mul(d.getMonth())+'月'+mul(d.getDate())+'日'+' '+day1+' '+mul(d.getHours())+':'+mul(d.getMinutes())+':'+mul(d.getSeconds())
</script>
微信倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>短信倒计时</title>
<style type="text/css">
button{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button id="butt4">发送</button>
<button id='butt5'>登录</button>
</body>
</html>
<script type="text/javascript">
var obutton=document.getElementById('butt4')
var obutton2=document.getElementById('butt5')
var times=60
var timer=null
obutton.onclick=function(){
if(this.innerHTML=='发送' ||this.innerHTML=='重新发送'){
this.disabled=true
timer=setInterval(function(){
obutton.innerHTML=times+'s'
obutton.style.backgroundColor='darkgray'
if (times<=0){
obutton.disabled=false
obutton.innerHTML='重新发送'
times=60
obutton.style.backgroundColor=''
clearInterval(timer)
}
times-=1
},1000)
}
}
obutton2.onclick=function(){
if (times<60 && times>0){
obutton.disabled=false
clearInterval(timer)
obutton.innerHTML='发送'
times=60
obutton.style.backgroundColor=''
}
}
</script>
1.JPG
classname兼容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id='tang'>
<div class='song'>song yuan qing</div>
<div class='song'>song</div>
</div>
<div class='song'>song</div>
<div class='song'>song</div>
</body>
</html>
<script type="text/javascript">
var odiv=document.getElementById('tang')
function getByClassName(obj,classname){
//找到所有标签
var abiaos=obj.getElementsByTagName('*')
var arr=[]
//遍历所有标签
for(var i=0;i<abiaos.length;i++){
//得到所有属性
var leiming=abiaos[i].className
//按空格切割所有属性
var arr1=leiming.split(' ')
//遍历一个标签，找到属性名是classname
for(var j=0;i<arr1.length;j++){
if (arr1[j]=='classname'){
arr.push(arr1[j])
}
}
}
return arr
}
console.log(getByClassName(odiv,'song'))
</script>
网友评论