var porpressBar = document.getElementById('progressBar')
var info = document.getElementById('info')
var barW = 0
var id = setInterval(function(){
barW+=2
porpressBar.style.width = barW + 'px'
info.innerText = barW/2 + '%'
if(barW==200){
clearInterval(id)
}
},500) console.log(screen.availHeight);
console.log(screen.availWidth);
<div id="box">
<div id="progressBar"></div>
</div>
<span id="info">0%</span>
//style
        #box{
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
        #progressBar{
            height: 50px;
            background-color: red;
        }

用JavaScript写一个进度条的更多相关文章

  1. 用python的time库写一个进度条

    运算符 算数运算 如a=10,b=20 +两个数相加 a+b=30 -两个数相减 a-b=-10 两个数相乘 a****b =200 /两个数相除b/a=2 %取模,并返回余数b%a=0 幂,a*** ...

  2. Python中如何写控制台进度条的整理

    本文实例讲述了Python显示进度条的方法,是Python程序设计中非常实用的技巧.分享给大家供大家参考.具体方法如下: 首先,进度条和一般的print区别在哪里呢? 答案就是print会输出一个\n ...

  3. ftk学习记录(一个进度条文章)

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 首先.在開始今天的文章之前.我们还是给朋友们展示一下前面一段代码的执行效果.效果例如以下, w ...

  4. 怎么用JavaScript写一个区块链?

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  5. JavaScript之Loading进度条

    一个loading进度条,定义一个fakeProgress方法,定位一个URL,然后setTimeout设置跳转时间我们就能看到我们要打开的URL网址了. 这个链接我就直接链接到我的新浪博客去了,算是 ...

  6. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

  7. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  8. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  10. Android 基于帧布局实现一个进度条 FrameLayout+ProgressBar

    在FrameLayout中添加一个ProgressBar居中 <ProgressBar android:layout_gravity="center" android:id= ...

随机推荐

  1. shell 从1加到100

  2. HDU 1828 Picture(线段树扫描线求周长)

    Picture Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  3. 第一篇代码 嗨翻C语言 21点扑克

    /* *  计算牌面点数的程序. *  使用“拉斯难加斯公开许可证”. *  学院21点扑克游戏小组. */#include <stdio.h>#include <stdlib.h& ...

  4. 6、android开发中遇到的bug整理

    1.使用actionProvider时出现的问题 bug复现: 解决方案: //import android.support.v4.view.ActionProvider; import androi ...

  5. IE Firefox Safari 下 通过Div“隐藏”设置Accesskey的submit input

    实现效果: 进入页面后 通过快捷键  如Alt+C 调用相关的隐藏按钮 实现功能操作 正常情况下 设置 button => input type="submit" acces ...

  6. 列表显示数据 但是数据的字体颜色要js添加

    1.需求:数据在前台显示,但是每个条记录的颜色要有点不同 1.java后台数据的处理 String ids=""; for(int x=0;x<sign.size();x++ ...

  7. Android 动画之ScaleAnimation应用具体解释

    android中提供了4中动画: AlphaAnimation 透明度动画效果 ScaleAnimation 缩放动画效果 TranslateAnimation 位移动画效果 RotateAnimat ...

  8. Uva 572 Oil Deposits

    思路:可以用DFS求解.遍历这个二维数组,没发现一次未被发现的‘@’,便将其作为起点进行搜索.最后的答案,是这个遍历过程中发现了几次为被发现的‘@’ import java.util.*; publi ...

  9. 【转】文件恢复神器extundelete

    参考博文: 1.Linux中VMware虚拟机增加磁盘空间的扩容操作 http://www.net130.com/CMS/Pub/special/special_virtual/special_vir ...

  10. Swift try try! try?使用和区别

    Swift try try! try?使用和区别 一.异常处理try catch的使用 1. swift异常处理 历史由来 Swift1.0版本 Cocoa Touch 的 NSError ,Swif ...