day27-作业

作者: 七一欧 | 来源:发表于2018-08-21 19:44 被阅读0次

day27-作业
day27-网络基础
day27-网络回顾
day27-每日写作
#30天专注橙长计划#数学魔术Day27-我了解你
作业-第07周--课堂-Day27-常见的网络命令
62号 #百日生涯营# D27电台日
51号百日营day27电台日作业
Day27-茜茜相亲
49号#百日生涯营# day27 神器日

1、实现点击按钮，滚动条走动和百分比走动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滚动条和百分比走动</title>
    </head>
    <body>
        <button >进度条</button>
        <div id="" style="border: 1px solid black;width: 700px;height: 100px;">
            <div id="d1" style="width: 0;height: 100px;background-color: palegoldenrod">
            </div>
        </div>
        
        <div id="d2" style="font-size: 30px;">
            0
        </div>
        <div id="">
            <button id="b1">开始</button>
            <button id="b2">暂停</button>
        </div>
    </body>
</html>
<script type="text/javascript">
    var obtn1 = document.getElementById('b1')
    var obtn2 = document.getElementById('b2')
    var odiv1 = document.getElementById('d1')
    var odiv2 = document.getElementById('d2')
    var timer = null
    var i = 0
    obtn1.onmouseup = function(){
                this.disabled = true
        timer = setInterval(function(){
            if (i<100){
                i++
            odiv1.style.width = 700*i/100+'px'
            odiv2.innerHTML = i+'%'
            }
                      obtn1.disabled = false
        },100)
    }
    obtn2.onmouseup = function(){
        clearInterval(timer)
    }
</script>

结果

2、实现秒表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>秒表</title>
    </head>
    <body>
        <div id="d1" style="height: 100px;width: 200px;background-color: paleturquoise;">
            00:00
        </div>
        <button id="b1">开始</button>
        <button id="b2">暂停</button>
        <button id="b3">重置</button>
    </body>
</html>
<script type="text/javascript">
    var odiv = document.getElementById('d1')
    var obtn1 = document.getElementById('b1')   
    var obtn2 = document.getElementById('b2')   
    var obtn3 = document.getElementById('b3')   
    
    var timer = null


    obtn1.onclick = function(){
    var i = 0
    var j = 0
    list = odiv.innerHTML.split(':')
    var i1 =list[0]
    var j1 =list[1]
        timer = setInterval(function(){
                j++
                
                if (j == 100){
                    j = 0
                    i++
                }
                    
                if (j<10){
                    j1='0'+j
                }
                else{
                    j1=j
                }
                
                
                if (i<10){
                    i1 = '0'+ i
                }
                else{
                    i1 = i
                }
                
                odiv.innerHTML=i1+':'+j1
        },10)
        
    }
    
    obtn2.onclick = function(){
        clearInterval(timer)
    }
    
    obtn3.onclick = function(){
    clearInterval(timer)    
    odiv.innerHTML='00:00'
    }
</script>

结果