html5实现滑块功能之------type="range"属性
来源:互联网 发布:南京java培训学校 编辑:程序博客网 时间:2024/05/17 10:27
html5实现滑块功能之------type="range"属性
1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。
2.感觉挺有意思,就做了一个关于滑块的动画的例子,可以通过开始和结束按钮来控制滑块的滑动和停止,有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。
3.具体代码如下所示
<!DOCTYPE html>
<html>
<head>
<title>数字递增组件</title>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<!--做一个播放控件-->
<div id="movie">
<!--定义滑块组件-->
<input type="range" id="slider" min="0" max="1000" step="1" value="0" onchange="print()" />
<!--显示滑块组件的当前值-->
<p>当前值为:<span id="print">0</span></p>
<!--控制按钮-->
<button id="start" onclick="start()">播放</button>
<button id="stop" onclick="stop()">停止</button>
</div>
</body>
</html>
<script type="text/javascript">
//定义一个标识符,用于判断用户点击开始按钮或暂停按钮
var choose = true;
//此函数用于显示滑块的当前值
function print(){
//获取信息
var value = parseFloat($("#slider").val());
//将信息显示
$("#print").text(value);
}
//此函数负责修改value的值
function changeVal(){
//使用纯js实现
/*var value = parseFloat(document.getElementById("slider").value);
//显示信息
document.getElementById("print").innerHTML=value;
if(value==1000){
return;
}else{
document.getElementById("slider").value = value+10;
}*/
//使用jquery实现
var value = parseFloat($("#slider").val());
//显示信息
print();
//修改滑块的值
if(value==1000 || choose == false){
return;
}else{
$("#slider").val(value+1);
}
}
//此函数负责开始按钮
function start(){
choose = true;
setInterval("changeVal()",10);
}
//此函数负责暂停按钮
function stop(){
choose = false;
}
</script>
2.感觉挺有意思,就做了一个关于滑块的动画的例子,可以通过开始和结束按钮来控制滑块的滑动和停止,有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。
3.具体代码如下所示
<!DOCTYPE html>
<html>
<head>
<title>数字递增组件</title>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
<!--做一个播放控件-->
<div id="movie">
<!--定义滑块组件-->
<input type="range" id="slider" min="0" max="1000" step="1" value="0" onchange="print()" />
<!--显示滑块组件的当前值-->
<p>当前值为:<span id="print">0</span></p>
<!--控制按钮-->
<button id="start" onclick="start()">播放</button>
<button id="stop" onclick="stop()">停止</button>
</div>
</body>
</html>
<script type="text/javascript">
//定义一个标识符,用于判断用户点击开始按钮或暂停按钮
var choose = true;
//此函数用于显示滑块的当前值
function print(){
//获取信息
var value = parseFloat($("#slider").val());
//将信息显示
$("#print").text(value);
}
//此函数负责修改value的值
function changeVal(){
//使用纯js实现
/*var value = parseFloat(document.getElementById("slider").value);
//显示信息
document.getElementById("print").innerHTML=value;
if(value==1000){
return;
}else{
document.getElementById("slider").value = value+10;
}*/
//使用jquery实现
var value = parseFloat($("#slider").val());
//显示信息
print();
//修改滑块的值
if(value==1000 || choose == false){
return;
}else{
$("#slider").val(value+1);
}
}
//此函数负责开始按钮
function start(){
choose = true;
setInterval("changeVal()",10);
}
//此函数负责暂停按钮
function stop(){
choose = false;
}
</script>
阅读全文
1 0
- html5实现滑块功能之------type="range"属性
- html5 input type="range"实现拖拉滑条功能
- input type=“range”滑块自定义样式,实现步骤详解及实际应用
- 设置input type=range滑块的CSS样式
- input type = "range"滑块和output的使用
- input[type="range"]是html5中的input标签新属性,样子如下:
- HTML5之Range对象
- input[type = range]
- html5之Range对象详解
- HTML5—————— 自定义(滑动条)input[type="range"]样式
- CSS3 range滑块变色
- html5中的input(type="file")的multiple属性,实现多文件上传,并用js控制文件大小,数量
- HTML5菜单栏切换实现底部滑块滑动效果实现
- html5 表单 range 实现显示刻度值
- html5 input的type属性启动输入法
- html5中input框type属性
- Html5中input标记的type属性
- HTML5表单之Input 类型-range
- hdu2177威佐夫博弈
- ServerSocket和Socket建立通信(服务器和客户端循环接收发送)
- 当git仓库checkout出现文件消失的处理方法
- 单点登录之windows中搭建cas服务器(使用cas-server4.1.3)
- spark入门知识
- html5实现滑块功能之------type="range"属性
- ZYNQ系统中实现FAT32文件系统的SD卡读写之三 SDK编程调试
- Project Euler Problem3
- 体验+架构-揭开运营活动的那一年,那一夜!
- QTableWidget&&QTableView 导出数据到excel
- Bootstrap模态框插入视频
- codemA3倒水题( 二分)
- 数据不平衡处理方法
- ftp sftp 学习记录