原生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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
require.js中的define函数详解
Jul 10 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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递归算法和应用方法介绍
2013/04/15 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python监控进程脚本
2018/04/12 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python清空命令行方式
2020/01/13 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
业务员岗位职责
2013/11/16 职场文书
园林资料员岗位职责
2013/12/30 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
公司捐款倡议书
2014/05/14 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书