js配合html实现360小球变化

来源：互联网发布：淘宝首页装修要多少钱编辑：程序博客网时间：2024/06/04 01:13

今天实现以下360的小球

效果如下，（有如下疑惑，在设置闪烁状态的时候，发现如果内容为空，就会出现异常，不知道为什么）：
360小球，定时器中更改小球的状态

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Bootloader</title><script type="text/javascript" src="./jquery-3.2.1.js"></script><style type="text/css">    .box {        width:34px;        height:34px;        content:"58%";        line-height:34px;        text-align:center;        left:3px;        top:3px;        border-radius:50%;        border:2px solid #43a547;        box-shadow:0 0 2px 0 #e8e5df inset;        background:linear-gradient(#f4f4f4  25%,#b6e48f 40%,#9cd87a);        background:-webkit-linear-gradient(#f4f4f4 25%,#b6e48f 40%,#9cd87a);        background:-moz-linear-gradient(#f4f4f4 25%,#b6e48f 40%,#9cd87a);    }</style><script type="text/javascript">    var totaltime=0;    var intervalid=0;    var intervalid1=0;    function intervalcall(periodtime){        totaltime = totaltime+periodtime;        var percect = totaltime/100;        var mpercent1 = percect>10?(percect-10):percect;        var mpercent2 = percect>20?(percect-20):percect;        if(percect>=100){            //结束定时器            mpercent1=100;            mpercent2=0;            window.clearInterval(intervalid);        }        if(totaltime%1000!=0){//需要更新进度条            $("#box1").text("...");//实现闪烁状态        }else{            $("#box1").text(percect+"%");/*percect.toString()或者改写法会自动转换为字符串*///(#3D9171    " + mpercent+ "%,#4BCC60 " + percect + "%,#4BCC60)");            $("#box1").css("background","linear-gradient(#f4f4f4    " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");            $("#box1").css("background","-webkit-linear-gradient(#f4f4f4    " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");            $("#box1").css("background","-moz-linear-gradient(#f4f4f4    " + (100-percect)+ "%,#b6e48f " + (100-mpercent1) + "%,#9cd87a " + (100-mpercent2) + "%,#9cd87a)");        }    }    $(document).ready(function($) {        intervalid = setInterval("intervalcall(500)",500);    });</script></head><body><div>    <ul>        <li>           <div class="box" id="box1">58%</div>        </li>    </ul></div></body></html>

阅读全文

0 0