1. 程式人生 > >5.18改背景進度條

5.18改背景進度條

500px 娛樂 htm 執行 lin AS point pre .get

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            .xw{
                width: 100px;
                height: 80px;
                border: 1px solid black;
                
float: left; text-align: center; line-height: 80px; } .xw:hover{ cursor: pointer; } .xw1{ background-color:blue; } .xw2{ background-color:greenyellow; } .xw3{ background
-color:red; } .xw4{ background-color:yellow; } #nr1{ width: 400px; height: 400px; border: 1px solid red; background-color: blue; } #jd{ width:500px; height: 20px; border: 1px solid black; } #nei{ width:0px; height: 20px; background
-color: blue; } </style> </head> <body> <div id="nr"> <div class=‘xw xw1‘ onclick="gb(‘blue‘)">國內新聞</div> <div class=‘xw xw2‘ onclick="gb(‘greenyellow‘)">國際新聞</div> <div class=‘xw xw3‘ onclick="gb(‘red‘)">體育新聞</div> <div class=‘xw xw4‘ onclick="gb(‘yellow‘)">娛樂新聞</div> </div> <div id="nr1"></div> <br /><br /><br /><br /> <div id="jd"> <div id="nei"> </div> </div> <br /><br /><br /><br /> <br /><br /><br /><br /> </body> </html> <script type="text/javascript"> window.onload=function(){//頁面加載完成才執行裏面的代碼 jdt(); } function gb(a) { var b=document.getElementById("nr1"); b.style.backgroundColor=a; } function jdt() { var c=document.getElementById("nei"); c.style.transition="3s"; c.style.width="500px"; } </script>

技術分享圖片

5.18改背景進度條