Day7-作業(yè)

滾動條

<!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">結(jié)束</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āng)前時間是：'+d.getFullYear()+'年'+mul(d.getMonth())+'月'+mul(d.getDate())+'日'+'   '+day1+'   '+mul(d.getHours())+':'+mul(d.getMinutes())+':'+mul(d.getSeconds())
</script>

微信倒計(jì)時

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>短信倒計(jì)時</title>
        <style type="text/css">
            button{
                width: 200px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <button id="butt4">發(fā)送</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=='發(fā)送' ||this.innerHTML=='重新發(fā)送'){
            this.disabled=true
            timer=setInterval(function(){
                obutton.innerHTML=times+'s'
                obutton.style.backgroundColor='darkgray'
                
                if (times<=0){
                    obutton.disabled=false
                    obutton.innerHTML='重新發(fā)送'
                    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='發(fā)送'
            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){
        //找到所有標(biāo)簽
        var abiaos=obj.getElementsByTagName('*')
        var arr=[]
        //遍歷所有標(biāo)簽
        for(var i=0;i<abiaos.length;i++){
            //得到所有屬性
            var leiming=abiaos[i].className
            //按空格切割所有屬性
            var arr1=leiming.split(' ')
            //遍歷一個標(biāo)簽，找到屬性名是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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 清明小長假結(jié)束了，一切又回歸正軌，朝九晚五。 今天收到兩位小伙伴共四幅作品。 一、雅雅清清的形象思維圖和因果分析作...
    lilycat閱讀 236評論 0贊 0
  • 今天在早讀會分享的是“點(diǎn)、線、面、體”，點(diǎn)是個人，線是路徑，面是平臺，體是趨勢?？傮w來說，就是要看清形勢，善于...
    ccy627閱讀 363評論 0贊 4
  • 羊不吃青草，作業(yè)1分，接龍1分。 看作業(yè)就知道，你很專業(yè)。診斷式問題對銷售人員最大的考驗(yàn)就是：銷售人員是否熟悉自己...
    大胡子逸舟閱讀 240評論 0贊 0
  • 1.寫一個程序 a.用一個變量來保存一個班級的學(xué)生信息，學(xué)生信息:姓名、學(xué)號、成績(英語、體育、美術(shù)、數(shù)學(xué))、年齡...
    HavenYoung閱讀 347評論 0贊 2
  • 1.編寫一個函數(shù)，求1+2+3+...+N 結(jié)果 2.編寫一個函數(shù)，求多個數(shù)中的最大值 結(jié)果 3.編寫一一個函數(shù)，...
    舊時初_2e8d閱讀 223評論 0贊 4

友情鏈接更多精彩內(nèi)容