js进度条（伪）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .c{width: 700px;height: 90px;margin: 0 auto;}
        .c1 #t1{color: #999999;background-color: black;width: 835px;height: 50px;font-size: 50px;line-height: 50;}
    </style>
    <script>
        var M="";
        var ID=0;
        var SD;
        window.onload=function () {
          cl()
        };
        function pre() {
            var ele=document.getElementById("t1");
            ele.value=M+ID+"%";
            ID+=10;
            M+="██";
            if (ID>100){clearInterval(SD);}
        }
        function cl() {
            if (ID!=110){
            pre();
            SD=setInterval(pre,1000);}
        }

    </script>
</head>
<body>
<div class="c">
<div class="c1">
    <input type="text" id="t1" onfocus="this.blur()">
</div></div>
</body>
</html>
时间： 2024-11-05 12:13:40

js进度条（伪）的相关文章

在vue项目中使用Nprogress.js进度条

NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done(); 2.使用 router.js //导入 import NProgress from 'nprogress' import 'nprogress/nprogress.c

js 进度条效果

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style>#myProgress { width: 100%; height: 30px; position: relative; background-color: #ddd;} #myBar { background-color: #4CAF5

js 进度条，可实现结束和重新开始

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 9 10 11 .container { 12 width

转载：JS进度条

转载地址:http://blog.csdn.net/treeClimber/article/details/569974 代码在原基础上稍作改动,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Docum

js进度条小事例

<style> #div1{width: 500px;height: 20px;border: 1px solid gray;} #div2{height: 20px;width: 0px;background:green;} </style> <div id="div1"> <div id="div2"></div> </div> <span id="span1"&g

js 实现进度条功能。

/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options && options.width)?parseFloat(options.width) : parseFloat(this.options.width); this.h = (options && options.height)?parseFloat(options.height) : pa

简单的jquery进度条插件LineProgressbar.js

参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').L

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript">

原生js上传文件 显示进度条

最近在做文件上传的功能,因为界面设计比较简单,就没有引用jq,但是网上大部分的上传插件都需要jq的支持.为了一个上传功能引用90多k的jq文件有点太小题大做了,所以就自己动手写了一个原生js上传的demo.下面是代码: HTML代码 <html> <head> <title></title> </head> <body> <input type="file" id="f" /> &l