原生JavaScript实现进度条


Posted in Javascript onFebruary 19, 2021

JavaScript实现进度条的具体代码,供大家参考,具体内容如下

进度条实现介绍

使用JavaScript实现进度条功能。

原理:通过鼠标移动事件,获取鼠标移动的距离。

步骤:

(1)html 中 div 布局
(2)css 样式编写
(3)JavaScript特效编写

html代码

<body>
 <!-- 整体盒子 -->
 <div id="box">
 <!-- 进度条整体 -->
 <div id="progress">
 <!-- 进度条长度 -->
  <div id="progress_head"></div>
 <!-- 进度条移动条 -->
 <span id="span"></span>
 <div>
 <!-- 显示数据 -->
 <div id="percentage">0%</div>
 </div>
</body>

css样式

<style>
 /* 整体样式,消除默认样式 */
 body{
 margin:0;
 padding:0;
 }
 #box{
 position:relative;
 width:1000px;
 height:30px;
 margin:100px auto;
 } 
 #progress{
 position:relative;
 width:900px;
 height:30px;
 background:#999999;
 border-radius:8px;
 margin:0 auto; 
 }
 #progress_head{
 width:0px;
 height:100%;
 border-top-left-radius:8px;
 border-bottom-left-radius:8px;
 background:#9933CC;
 
 }
 span{
 position:absolute;
 width:20px;
 height:38px;
 background:#9933CC;
 top:-4px;
 left:0px;
 cursor:pointer;
 }
 #percentage{
 position:absolute;
 line-height:30px;
 text-align:center;
 right:-44px;
 top:0;
 }
 
 
</style>

JavaScript代码

<script>

 //js获取节点
 var oProgress=document.getElementById('progress');
 var oProgress_head=document.getElementById('progress_head');
 var oSpan=document.getElementById('span');
 var oPercentage=document.getElementById('percentage')

 //添加事件 鼠标按下的事件
 oSpan.onmousedown=function(event){
 
 var event=event || window.event;
 var x=event.clientX-oSpan.offsetLeft;

 document.onmousemove=function(){
 
 var event=event || window.event;
 var wX=event.clientX-x;
 
 
 if(wX<0)
 {
  wX=0;
 }else if(wX>=oProgress.offsetWidth-20)
 {
  wX=oProgress.offsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 return false;
 };
 
 document.onmouseup=function(){
 
 document.onmousemove=null; 
 };
 
 }; 
</script>

效果图

原生JavaScript实现进度条

原生JavaScript实现进度条

整体代码

<!DOCTYPE>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>进度条</title>
 <style>
 /* 整体样式,消除默认样式 */
 body{
 margin:0;
 padding:0;
 }
 #box{
 position:relative;
 width:1000px;
 height:30px;
 margin:100px auto;
 } 
 #progress{
 position:relative;
 width:900px;
 height:30px;
 background:#999999;
 border-radius:8px;
 margin:0 auto; 
 }
 #progress_head{
 width:0px;
 height:100%;
 border-top-left-radius:8px;
 border-bottom-left-radius:8px;
 background:#9933CC;
 
 }
 span{
 position:absolute;
 width:20px;
 height:38px;
 background:#9933CC;
 top:-4px;
 left:0px;
 cursor:pointer;
 }
 #percentage{
 position:absolute;
 line-height:30px;
 text-align:center;
 right:-44px;
 top:0;
 }
 
 
 </style>
</head>
<body>

 <!-- 整体盒子 -->
 <div id="box">
 <!-- 进度条整体 -->
 <div id="progress">
 <!-- 进度条长度 -->
  <div id="progress_head"></div>
 <!-- 进度条移动条 -->
 <span id="span"></span>
 <div>
 <!-- 显示数据 -->
 <div id="percentage">0%</div>
 </div>

</body>
</html>
<script>

 //js获取节点
 var oProgress=document.getElementById('progress');
 var oProgress_head=document.getElementById('progress_head');
 var oSpan=document.getElementById('span');
 var oPercentage=document.getElementById('percentage')

 //添加事件 鼠标按下的事件
 oSpan.onmousedown=function(event){
 
 var event=event || window.event;
 var x=event.clientX-oSpan.offsetLeft;

 document.onmousemove=function(){
 
 var event=event || window.event;
 var wX=event.clientX-x;
 
 
 if(wX<0)
 {
  wX=0;
 }else if(wX>=oProgress.offsetWidth-20)
 {
  wX=oProgress.offsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 
 return false;
 };
 
 document.onmouseup=function(){
 
 document.onmousemove=null;
 
 };
 
 };
 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
xml和web特殊字符
Apr 28 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
原生JavaScript实现换肤
Feb 19 #Javascript
基于vue的video播放器的实现示例
Feb 19 #Vue.js
JavaScript Dom实现轮播图原理和实例
Feb 19 #Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 #Javascript
react项目从新建到部署的实现示例
Feb 19 #Javascript
原生JavaScript实现幻灯片效果
Feb 19 #Javascript
JavaScript 实现继承的几种方式
Feb 19 #Javascript
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
package.json文件配置详解
2017/06/15 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
机械专业应届生求职信
2013/12/12 职场文书
工作迟到检讨书
2014/02/21 职场文书
项目投资合作意向书
2014/07/29 职场文书
2015年入党决心书
2015/02/05 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang