html原生js进度条圆形,原生JavaScript实现进度条
JavaScript实现进度条的具体代码，供大家参考，具体内容如下
进度条实现介绍
使用JavaScript实现进度条功能。
原理：通过鼠标移动事件，获取鼠标移动的距离。
步骤：
(1)html 中 div 布局
(2)css 样式编写
(3)JavaScript特效编写
html代码
css样式
/* 整体样式，消除默认样式 */
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;
}
JavaScript代码
//js获取节点
var oProgress=document.getElementById('progress');
var oProgress_head=document.getElementById('progress_head');
var oSpan=document.getElementById('span');
var oPercentage=document.getElementById('percentage')
//添加事件 鼠标按下的事件
oSpan.οnmοusedοwn=function(event){
var event=event || window.event;
var x=event.clientX-oSpan.offsetLeft;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
};
};
效果图
整体代码
进度条
/* 整体样式，消除默认样式 */
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;
}
//js获取节点
var oProgress=document.getElementById('progress');
var oProgress_head=document.getElementById('progress_head');
var oSpan=document.getElementById('span');
var oPercentage=document.getElementById('percentage')
//添加事件 鼠标按下的事件
oSpan.οnmοusedοwn=function(event){
var event=event || window.event;
var x=event.clientX-oSpan.offsetLeft;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
};
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
html原生js进度条圆形,原生JavaScript实现进度条相关推荐
- html原生js进度条圆形,原生 JavaScript 实现进度条
原生JavaScript特效 JavaScript实现进度 进度条实现介绍 使用JavaScript实现进度条功能. 原理:通过鼠标移动事件,获取鼠标移动的距离. 步骤: (1)html 中 div ...
- js练手小项目——JavaScript实现进度条
setInterval( )定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInte ...
- 原生js怎么追加html,原生JS改变HTML内容
最近发现总是把原生JS语法和诸多框架库神马的语法搞混,打算暂时弃用各种库,回归到原生来,好好抠一抠所有的细节,跳一跳各种坑,才能飞得更远.PS. 突然想起冰火里面三眼乌鸦对布兰说的那句话--You'l ...
- html5支持原生js,HTML5怎么学原生的js？让你对前端有了新的认识
原标题:HTML5怎么学原生的js?让你对前端有了新的认识 已经学习了HTML5两个月,第一个月主要学习HTML和CSS,第二个月学完了原生的js,学完原生的js后对前端有了新的认识,了解了前端并不是 ...
- 原生JS那些事：原生JS添加和删除class类名
2019独角兽企业重金招聘Python工程师标准>>> 如何使用原生js给一个节点添加和删除class名? 由于我们一直习惯于使用jQ封装好的方法,偶尔项目中也会用原生js,这就要了 ...
- 原生js追加html代码,原生js实现给指定元素的后面追加内容
复制代码 代码如下: var header1 = document.getElementById("header"); var p = document.createElement ...
- 原生JS清空子元素+原生JS添加子元素
//获取父元素-清空子元素 let content = document.getElementsByClassName("table-page__text")[0]; //循环删除 ...
- 原生js ajax请求 post,原生js实现ajax 发送post请求
2019独角兽企业重金招聘Python工程师标准>>> var postData = { "name1": "value1", "n ...
- php前台限制输入text字符,限制字符输入数功能(jquery版和原生JS版)
比较常用的限制字符输入数功能(比如热火超天的微博输入框),用jquery和原生JavaScript分别写了一个.原生JavaScript注释中有区分中英文字符的函数, 但个人并不建议这么做. 已知BU ...
- 原生JS实现的DOM操作笔记（草稿整理）
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
最新文章
- Javascript获取页面、屏幕尺寸大小参数
- 一款强大而实用的图片去水印神器
- Spring集成Shiro框架实战
- C语言再学习 -- printf、scanf占位符
- 阿里云视频云编码优化的思考与发现
- mysql二阶段提交有什么问题_MySQL的事务两阶段提交的技术有什么意义？
- lua传值到php,使用lua实现php的var_dump()函数功能
- nginx.conf文件内容详解
- 在线文本去重统计工具
- mysql主从数据库服务器搭建
- c语言查看错误步骤命令,C语言之预处理命令
- 安装python报错
- c语言的程序的基本示例
- Adreno GPU上的DirectX应用开发简介 (1)
- CentOS 7安装MinDoc文档系统
- 直流可调稳压电源电压设计电路
- 多目标优化——帕累托最优
- 从存活了1441年的企业，我们能学到什么？
- 医疗器械分销系统开发|分销商是怎么招募的？
- macOS 安装 brew步骤