原生JS編寫了個簡易進度條，還請各位前輩指教~

阿新 • • 發佈：2018-06-04

classname 學習 UNC TP .com 開始學習 com get 能說

剛開始學習JS不久，以及第一次來到博客園，第一次進行分享博文。。。

噢，不對，不能說是分享，而是學習請教，請前輩多多指教，各個方面都可以~

感謝您的路過~

技術分享圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .boxs{width:800px;margin:100px auto;}
            .box{width:800px;background:grey;border 
-radius:4px;position:relative;height:34px;float:left;}
            .rate{position:absolute;border-radius:4px;top:-35px;}
            .rate div:nth-of-type(1){line-height:25px;width:34px;background:black;border-radius:3px;color:white;text-align: center;font-size: 12px;}
            .rate div:nth-of-type(2){border:6px solid transparent;border-top-color:black;width:0px;position:absolute;left:11px}
            #box1{height:16px;position:absolute;background:blue;margin 
-top: 9px;left:17px;z-index:2;}
            .sign{border:8px solid transparent;border-left-color:black;width:0px;margin-top: 9px;z-index:2;position:relative;left:17px;}
            .dashed{width: 756px;height: 2px;background-image: linear-gradient(to right, #fff 0%, #fff 55%, transparent 50%);background-size: 12px 2px;background-repeat: repeat-x;position:absolute;top:16px;z-index:1;left:17px;}
         
</style>
        <script type="text/javascript">
            window.onload=function(){
                var rate=document.getElementsByClassName("rate")[0];
                var rate1=rate.firstElementChild;
                rate1.innerHTML="0%";
                var box1_l=document.getElementById("box1");
                var sign_l=document.getElementsByClassName("sign")[0];
                
                var bottom_rate=document.getElementsByClassName("dashed")[0];
                var length_brate=bottom_rate.offsetWidth;
                
                var speed=1;
                function move(){
                    box1_l.style.width=box1_l.offsetWidth+speed+‘px‘;
                    sign_l.style.left=sign_l.offsetLeft+speed+‘px‘;
                    rate.style.left=rate.offsetLeft+speed+‘px‘;
                    
                    if(rate1.innerHTML!="100%"){
                        rate1.innerHTML=parseInt(parseInt(box1_l.style.width)/length_brate*100)+‘%‘;
                    }else{
                        clearInterval(rate_1);
                    }
                }
                var rate_1=setInterval(move,20);
            }
        </script>
    </head>
    <body>
        <div class="boxs">
            <div class="box">
                <div class="rate">
                    <div></div>
                    <div></div>
                </div>
                <div id="box1"></div>
                <div class="sign"></div>
                <div class="dashed"></div>
            </div>
        </div>
    </body>
</html>

原生JS編寫了個簡易進度條，還請各位前輩指教~

classname 學習 UNC TP .com 開始學習 com get 能說剛開始學習JS不久，以及第一次來到博客園，第一次進行分享博文。。。噢，不對，不能說是分享，而是學習請教，請前輩多多指教，各個方面都可以~ 感謝您的路過~ <!DOC

原生js做一個簡單的進度條

-i 隨機數函數 borde setw bubuko 原生 html 進度條 add 用原生js做進度條，布局非常簡單，一個盒子裏放一個span標簽，讓它的寬度為0，並且轉成塊元素。主要用定時器動態增加span的寬度，並且當它的寬度大於父級盒子的寬度的時候停止效果如下：

原生JS控制多個滾動條同步跟隨滾動

在一些支援用 markdown寫文章的網站，例如掘金或者 CSDN等，後臺寫作頁面，一般都是支援 markdown即時預覽的，也就是將整個頁面分成兩部分，左半部分是你輸入的 markdown文字，右半部分則即時輸出對應的預覽頁面，例如下面就是 CSDN後臺寫

視頻控制的簡易進度條

同時相關操作 white post ati str tag top spa 視頻控制的簡易進度條樣式：作用：控制視頻的播放點，實時顯示視頻播放位置 html： <div class="coll"> <s

原生JS寫了一個小demo，根據輸入的數字生成不同背景顏色的小方塊兒~

top == UNC 定位元素 demo TE tostring eight 地方昨天練習寫了這個小demo，個人覺得通過設置定位元素left和top的值，來實現換行的功能，這種方法很巧妙~ 另外，如下代碼中的隨機顏色的獲取，還請各位前輩多多指教：需要改進的地方；或者有

用 Python 給程序加個進度條，讓你的看起來更炫酷？

image 進度條 hub 一行 ref 當前標準輸出 alt 操作對於開發或者運維來說，使用 Python 去完成一些跑批任務，或者做一些監控事件是非常正常的情況。那麽如何有效地監控任務的進度？除了在任務中加上 Log 外，還能不能有另一種方式來了解任務進展到哪一步了

Canvas實現多個圓形進度條顯示百分比，並繫結各自的click事件

Canvas實現多個圓形進度條顯示百分比，並繫結各自的click事件目錄 Canvas實現多個圓形進度條顯示百分比並繫結各自的click事件目錄實現效果製

js 檔案下載/上傳進度條

/** * 下載檔案 - 帶進度監控 * @param url: 檔案請求路徑 * @param params: 請求引數 * @param name: 儲存的檔名 * @param progress: 進度處理回撥函式 * @param success: 下載完成回

微信原生小程式實現音樂播放進度條

audio標籤、progress標籤實現音樂播放進度條 HTML5 audio標籤、progress標籤實現音樂播放及進度條，通過拖動進度條更新播放進度。本次分享以功能實現為主，樣式先不考究，見諒。 HTML <view class="audio-pl

JS video 禁止拖動進度條

需要實現一個效果，視訊載入的過程中禁止拖動進度條快進。開始呢我想著把控制元件禁掉，自動播放解決。 <video id="video" src="http://kuangjia.nenzhu.com/cs/psu.mp4" autoplay=”autoplay” width=

在Linux下實現簡易進度條

本文將要概述 printf的緩衝區問題； \r和\n的區別；如何實現一個簡易的進度條；奇怪的現象進度條是安裝和下載軟體中常見的部分，它可以表示軟體安裝或下載了多大，能給客戶一種直觀的感受，今天我們就來實現一個簡易的進度條，基本構思是這樣的，我們定

tar解壓過程中在console顯示簡易進度條

本指令碼用於在tar命令解壓檔案過程中，在console中顯示簡易的進度條，是根據解壓出的檔案總的大小和當前已經解壓的檔案大小來進行進度的顯示，程式比較簡易，普適性不是太強，很多變數可以以引數形式傳遞

如何使用canvas同時繪製多個並列進度條

先上效果：主要是去熟悉下canvas的一些屬性方法，主要應用的屬性方法如下： beginPath() 方法：開始一條路徑，或重置當前的路徑； closePath()方法：與上面的匹配，建立從當前點到開始點的路徑； moveTo(x,y)方法：開始一條路徑，移動到位置（x,y）； arc(x,y,r,Mat

Linux下c實現簡易進度條

#進度條：顧名思義就是看計算機處理任務時的速度，完成度，反正過程啥的。就是這樣子我們實現一個簡易版的我們需要的知識make命令編譯：因為方便。不瞭解make指令的先看看make指令介紹我們下

Linux系統下簡易進度條的實現

在我們安裝軟體或開啟遊戲時，會看到進度條的身影。今天我們就來在linux下實現一個簡易的進度條 1 . 在任意一個目錄下，touch jdt.c 檔案 vi jdt.c 2. 按 Z

用canvas和js畫了個鐘錶，跟大家分享一下

<pre name="code" class="javascript">(function () { var mycanvas=document.getElementById("mycanvas"); var otex=mycanvas.getContext("

簡單原生JS編寫顯示系統時間的幾種方法

上程式碼：<div id="Show_Time"></div> <script type="text/javascript"> function getdate() { var date =

VS2010——MFC編寫執行緒的進度條

一. 開啟VS2010程式，建立MFC工程；其中控制元件新增變數步驟： 1.介面右擊滑鼠，選擇Class Wizard 2.單擊Member Variables選單專案 3.選擇對應的控制元件，

Linux下簡易進度條的實現【轉】

在生活中，進度條是很常見的，那麼，進度條是如何實現的呢？　　首先，進度條的動態是利用人眼視覺暫留效果的。實際上是如下過程：先輸出：[= ]表示進度是1%，重新整理之後再

原生JS判斷兩個元素是否為兄弟節點

一個很簡單的方法，分別獲取兩個元素的父節點，判斷父節點是否相同，程式碼如下： HTML： <div id="one"> <p id = "p1" class="p1">Hello world!</p>

原生JS編寫了個簡易進度條，還請各位前輩指教~

相關推薦