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 ...

随机推荐

  1. 696. Count Binary Substrings - LeetCode

    Question 696. Count Binary Substrings Example1 Input: "00110011" Output: 6 Explanation: Th ...

  2. 利用shell脚本自动化备份数据库与手动备份还原数据库操作

    1.在linux操作系统上手动备份数据库 mysqldump -h 服务器IP地址 -u root -p数据库密码 --databases 所要备份的数据库名称 > /路径/数据库.sql(自定 ...

  3. 使用pip安装库或执行pip命令时报错解决方案

    初次安装pip后执行安装升级一般不会有问题,但是国外的镜像源下载升级由于网速过慢会进行报错,提示需要升级 pip 或者下载速度很慢最后直接报了错如下图: 这个时候只需要修改镜像源即可,建议修改为永久镜 ...

  4. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  5. C#中的String Interpolation

    本文迁移自Panda666原博客,原发布时间:2021年4月17日. 在英文中,$符号表示美元符号(United States dollar).这也是很多人喜欢的东西.甚至是一生最求的东西.但在编程语 ...

  6. 【Redis】事件驱动框架源码分析(多线程)

    IO线程初始化 Redis在6.0版本中引入了多线程,提高IO请求处理效率. 在Redis Server启动函数main(server.c文件)中初始化服务之后,又调用了InitServerLast函 ...

  7. 配置nginx多域名虚拟主机

    1.先做域名映射,由于我们使用的是阿里云域名. 登录阿里云控制台-->域名与网站(万网)-->域名-->选择一个域名-->域名解析-->添加记录 配置静态资源下载转发: ...

  8. Linux的文件路径和访问文件相关命令

    Linux的绝对和相对路径 绝地路径 绝对路径:以根作为起来的路径 相对路径 相对路径:以当前位置作为起点 文件操作命令 显示当前工作目录: pwd命令 pwd:显示文件所在的路径 基名:basena ...

  9. this关键字、static关键字、方法的调用

    1.带有static关键字的方法,不可使用this关键字.因为其调用方法为类名.方法名(建议这种方式,调用不需要对象的参与),不存在对象. 2.实例方法调用必须有对象的存在,先创建对象,通过引用.的方 ...

  10. DIY蓝牙hub F1方向盘

    介于已经入手了自己的第一套OWS FFB直驱力反馈方向盘,因此决定要自己做一款F1方向盘盘面,来提升一下F1 2020游戏的游戏体验感.整体的技术路线如下: [技术路线] 主控:esp32 软件环境: ...