js配合html实现360小球变化

最新推荐文章于 2022-05-31 16:03:22 发布

m_hand2010

最新推荐文章于 2022-05-31 16:03:22 发布

阅读量1.6k

点赞数

分类专栏： Html和CSS

本文链接：https://blog.csdn.net/u013719984/article/details/78176993

版权

Html和CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天实现以下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>