input type=range标签用法实例代码

在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

#demo{

width:50px;

height:50px;

background:red;

}

</style>

<script type="text/javascript">

window.onload=function(){

var demo=document.getElementById("demo");

var range=document.getElementById("range");

range.onmousemove=function(){

demo.style.width=this.value+"px";

}

</script>

</head>

<body>

<div id="demo"></div>

<input type="range" step="1" max="500" min="10" value="50" id="range"/>

</body>

</html>

以上代码可以平滑的拖动空间按钮来调整div的宽度，大家可以特别注意下此空间的几个常用属性，step用来规定，拖动数据变动的最小跨度，max规定最大值，min规定最小值。还有一个要特别注意的点是:实现此平滑拖动效果最好用onmousemove事件，在各个浏览器表现都是一致的，使用onchange事件在最新的谷歌和火狐浏览器中并不是平滑的。

原文发布时间为：2017-3-7

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：<input type="range">标签用法实例代码

input type=range标签用法实例代码相关推荐

html range关联文本框,HTML5gt;meter标签与input(type=range)标签结合制作简易范围指示器...
HTML5>meter标签与input(type=range)标签结合制作简易范围指示器发布时间:2020-03-26 15:41 很多时候我们能看到这样的表示范围的优化工具,能给人带来很好的 ...
HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
改变 input[type=range] css样式
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
HTML中INPUT type=date标签如何赋值注意问题
现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...
前端问题求助input type=“range”问题求助
目前我在做这样一个功能,PC端和手机端同步显示某个进度条. 原理是这样的,当我点击PC端的进度条时,手机端要跟着同步显示前端代码: <div class="one"> ...
input type=file 标签禁止让用户手动输入
常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击"浏览"按钮,在 ...
choose when 改在java中_Mybatis choose when用法实例代码
mybatis choose when的用法实现代码如下所示: mapper.xml: select a.city_id as CITYID, a.level1_maintain_unit_id as ...
java 自定义标签_Java自定义标签用法实例分析
本文实例讲述了Java自定义标签用法.分享给大家供大家参考,具体如下: 简单例子实现一个标签分为两步:(1)继承SimpleTagSupport或TagSupport实现一个控制器(2)创建一个描述 ...
jsp中用java写标签id_jsp中自定义标签用法实例分析
本文实例讲述了jsp中自定义标签用法.分享给大家供大家参考.具体如下: 这里简单的写了一个自定义标签,自己定义标签的好处就是在jsp页面中可以使用自己定义的功能,完全与Java代码分离 1. tld文 ...

input type=range标签用法实例代码

input type=range标签用法实例代码相关推荐

最新文章

热门文章