h5自定义滚动条并监听事件
2017-07-28 14:48
429 查看
代码加注释如下所示:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
margin: 100px auto;
text-align: center;
}
/*取消轨道样式*/
input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
}
/*取消滑块样式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
/*设置滑块样式*/
height: 25px;
width: 25px;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
/*自定义轨道样式*/
input[type=range] {
height: 15px;
width: 300px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
background-color: #ccc;
background-image: linear-gradient(to right,#1F548F, #1F548F);
background-repeat: no-repeat;
background-size: 20% 100%;
}
/*原始的控件获取到焦点时,会显示包裹整个控件的边框,所以还需要把边框取消。*/
input[type=range]:focus {
outline: none;
}
</style>
</head>
<body>
<div class="container">
<p>这里显示进度条的值</p>
<button class="reduce">-</button>
<input type="range" max="99" min="19" step="1" value="30">
<button class="add">+</button>
</div>
<script>
var sliderBar = document.getElementsByTagName('input')[0];
var reduceBtn = document.getElementsByClassName('reduce')[0];
var addBtn = document.getElementsByClassName('add')[0];
var pEle = document.getElementsByTagName('p')[0];
var MINAGE = 19;
var MAxAGE = 99;
// sliderBar.style.width = '300px';
// 监听 滑动条值的改变
sliderBar.addEventListener('input',function(e){
console.log(e.target.value)
pEle.innerHTML = e.target.value;
sliderBar.style.backgroundSize= (sliderBar.value - MINAGE)/80 * 100 + '% 100%'
})
// 点击 加号
reduceBtn.onclick = function(e){
sliderBar.value = Number(sliderBar.value) -1;
pEle.innerHTML = sliderBar.value -1;
sliderBar.style.backgroundSize= (sliderBar.value - MINAGE)/80 * 100 + '% 100%'
}
// 点击减号
addBtn.onclick = function(e){
sliderBar.value = Number(sliderBar.value) + 1;
pEle.innerHTML = Number(sliderBar.value) + 1;
sliderBar.style.backgroundSize= (sliderBar.value - MINAGE)/80 * 100 + '% 100%'
}
</script>
</body>
</html>
相关文章推荐
- [wxWidgets]_[初级]_[监听wxListCtrl和wxGrid的滚动条事件]
- Android中自定义ScrollView的滑动监听事件
- cocos2dx js 自定义监听事件
- Java用户自定义事件监听
- IOS之UI--自定义按钮实现代理监听点击事件
- 对于spring 的自定义事件发布与监听
- 简易的自定义滚动条加鼠标滑轮事件结合使用
- 自定义Dialog以及按钮事件监听
- EditText 监听、焦点事件、自定义样式全解及隐藏键盘
- 关于如何使用javascript监听滚动条滚动事件
- vbox等控件添加滚动条滚动事件的监听函数
- Android 自定义Dialog,自定义接口监听事件。
- 自定义dialog以及其监听事件
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
- js监听滚动条滚动事件使得某个标签内容始终位于同一位置
- Android 自定义Dialog类,并在Activity中实现按钮监听事件
- js事件应用(带框拖拽、自定义滚动条)
- 自定义UILable 监听事件
- 手工写的一段滚动条监听事件
- 关于实现自定义Dialog和实现Dialog里view的事件监听的两种方法