html原生js进度条圆形,原生 JavaScript 实现进度条
原生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 实现进度条相关推荐
- 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 ...
最新文章
- 【Ubuntu】Windows硬盘安装Ubuntu14.04
- .Net版行号消除器
- linux系统上传代码到gitlab服务器
- IntelliJ IDEA提示忽略大小写
- 2.原子变量 CAS算法
- 科来网络分析器11下载地址
- CPU内部原理,一文解析
- 想考阿里云ACP认证,网上买题库靠谱吗?
- 深入理解java虚拟机第一第二部分(周志明第三版)
- 相机快门之:电子快门
- VARIANT 数据类型简单介绍
- 腾讯开奖,薪资倒挂!
- 2020年国考行测错题集(省级)
- 多台主机共享一套鼠标键盘(跨屏鼠标键盘)
- python 编码 乱码问题
- 【Unity3D】游戏物体操作 ① ( 场景简介 | 添加游戏物体 | 操作游戏物体 | 选中游戏物体 | 场景显示效果缩放 | 重命名游戏物体 | 复制游戏物体 | 删除游戏物体 | 移动物体 )
- 【云原生布道系列】第三篇:“软”饭“硬”吃的计算
- kali安装keylogger_小白日记48:kali渗透测试之Web渗透-XSS(二)-漏洞利用-键盘记录器,xsser...
- natapp 外网映射本地
- Mangos脚本例子2