原生JavaScript实现进度条_javascript技巧

来源:脚本之家  责任编辑:小易  

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>

效果图

整体代码

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


  • 本文相关:
  • 移动端刮刮乐的实现方式(js+html5)
  • javascript学习笔记之创建对象
  • 基于javascript怎么实现让歌词滚动播放
  • 解决layer图标icon不加载的问题
  • 深入理解js promise chain
  • 详解javascript中的object.is()与"==="运算符总结
  • 详解使用uni-app开发微信小程序之登录模块
  • js纯前端实现腾讯cos文件上传功能的示例代码
  • javascript的removechild()函数用法详解
  • 微信小程序之分享页面如何返回首页的示例
  • 修改javascript 控制进度条
  • 原生javascript怎样写环形进度条
  • javascript 实现页面加载进度条代码
  • 用jQuery或者javascript怎么实现圆形进度条?
  • 用javascript写的进度条,怎么获取进度条的值,按...
  • html添加 javascript进度条
  • 我用javascript脚本实现进度条的功能,请问怎么给...
  • 网页加载的进度条是什么原理?用javascript做。
  • asp或Javascript实现进度条样式的天数统计
  • javascript 中如何解决进度条的显示
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript 进度条的几种方法js实现进度条的方法javascript实现网页加载进度条代码超简单js 进度条实现代码js 进度条效果实现代码整理js实现环形进度条(从0到100%)效果javascript jquery css 写的简单进度条控件用css+js实现的进度条效果效果js实现音频控制进度条功能php中使用session配合javascript实现文件上传进度条功能移动端刮刮乐的实现方式(js+html5)javascript学习笔记之创建对象基于javascript怎么实现让歌词滚动播放解决layer图标icon不加载的问题深入理解js promise chain详解javascript中的object.is()与"==="运算符总结详解使用uni-app开发微信小程序之登录模块js纯前端实现腾讯cos文件上传功能的示例代码javascript的removechild()函数用法详解微信小程序之分享页面如何返回首页的示例js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js保留两位小数方法总结解决react native端口号修改的方法webpack+vue2构建vue项目骨架的方法原生js 封装get ,post, delete 请求的实例比较详细的javascript dom 学习笔记js获取鼠标坐标、获取鼠标像素点示例javascript中的作用域scope介绍js采用concat和sort将n个数组拼接起来的方简化版手机端照片预览组件js焦点图,js 多个页面放多个焦点图的实例bootstrap项目实战之首页内容介绍(全)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved