Rumah > hujung hadapan web > tutorial js > JavaScript控制进度条的实例分析

JavaScript控制进度条的实例分析

黄舟
Lepaskan: 2017-11-21 11:36:52
asal
1504 orang telah melayarinya

在我们之前我们为大家介绍了JavaScript实现进度条的方法,原生实现进度条,那么如何控制进度条?JS控制进度条用到的元素比较简单,就一个p标签内嵌一个span标签即可,外面那层p做背景,内部那层span做动态进度显示,由JS控制。

整体代码如下:

<!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>
    <title>JS控制进度条</title>
    <style type="text/css">
        body
        {
            height:30px;
            width:330px;
            background-color:blue;
        }
        
        #ProgressBarBackgroundOne
        {
            background:url(ProgressBk.png) no-repeat 0 center;
            height:10px;
            width:300px;
        }
        #ProgressBarOne
        {
            background:url(ProgressFt.png) no-repeat 0 center;
            height:10px;
            width:0%;
            display:block;
        }
        
        #ProgressBarBackgroundTwo
        {
            background-color:White;
            height:10px;
            width:300px;
        }
        #ProgressBarTwo
        {
            background-color:Gray;
            height:10px;
            width:0%;
            display:block;
        }
        
    </style>
    <script type="text/javascript">
        var numOne = 0;
        var numTwo = 0;
        function SetProgressOne() {
            var ProgressOne = document.getElementById(&#39;ProgressBarOne&#39;);
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute(&#39;style&#39;, &#39;width:&#39; + numOne + &#39;%&#39;);
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById(&#39;ProgressBarTwo&#39;);
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute(&#39;style&#39;, &#39;width:&#39; + numTwo + &#39;%&#39;);
            setTimeout(SetProgressTwo, 500);
        }
        
    </script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>
Salin selepas log masuk

为了方便显示,我就直接在html文档里把css文本和js脚本写了出来,这是原生js控制进度条方式,另外也可以使用Node.js或mootools之类的js库来编写。

SetProgressOne()是使用了图片来进行进度显示;SetProgressTwo()则是使用了颜色进行进度显示,原理上都是一样,都是通过JS控制span标签的属性:style="width:预设值%"即可。在表现上,使用图片就比使用颜色要好一些,因为使用颜色不好处理圆角,并不是所有浏览器都支持CSS的圆角属性,下面是效果对比:

`U8[B`Y(KVR%Y)NOH28U9IX.png

总结:

通过本文的详细学习,相信小伙伴们对JavaScript控制进度条有了进一步的了解,希望对你的工作有所帮助!

相关推荐:

JavaScript进度条控件实现的示例


JavaScript实现进度条的几种方法介绍


JavaScript实现进度条的原生代码

Atas ialah kandungan terperinci JavaScript控制进度条的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan