第一次以这种方式做笔记,希望可以加强自己对新知识的理解,更希望能得到更多朋友的指正.

言归正传:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html class="no-js">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<style type="text/css">

.no-js selector{style properties}

</style>

<body>

<p>新的控件类型</p>

生成滑动条:<input type="button" value="+" id="add" onclick="changeRange(this,'rg')"/>

<input type="range" id="rg" min="10" max="100" step="10" onchange="change(this)"/>

<input type="button" value="-" id="sub" onclick="changeRange(this,'rg')"/>

<br/>

<input type="text" id="show"/>

<script type="text/javascript">

function change(elem){

var location=document.getElementById("show");

location.value=elem.value;

}

function changeRange(elem,rgp){

var targetId=elem.getAttribute("id");

var rg=document.getElementById(rgp);

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

if(targetId=='add'){

var num=~~(rg.value);

rg.value=num+10;

}else if(~~(rg.value)>10){

rg.value=~~(rg.value)-10;

}

show.value=rg.value;

}

</script>

</body>

</html>

html5之range的更多相关文章

  1. 深度挖掘，Html5的 Range 滑动刻度的坑，兼容全平台，将任性进行到底！

    最近2天一直在弄一个滑动的刻度效果,由于项目是基于Web App开发的,于是考虑到 移动端和pc端 的兼容性问题,考虑的比较多,尝试采用 Html5的Range 来做,目前已经兼容 pc端和移动端! ...

  2. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

  3. 通过html5的range属性动态改变图片的大小

    range属性已经是很成熟的属性了,我们可以使用这个属性进行动态调整图片的宽度,其中原理在于通过不断获取range的值,并赋予给所需要的图片,进而达到动态改变图片的效果.下面贴出具体的代码,主要参照了 ...

  4. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  5. Github资源汇集

    Github资源汇集 突然发现申请博客园已经两年有余,没有发表过一篇文章,十分惭愧.言归正传,先分享一下两年来收集的部分编程资源,大部分为Github上的项目.虽然网上这样的分享已不在少数,但不如我理 ...

  6. 【epubcfi函数generateRangeFromCfi和generateCfiFromRange】两者的区别和适用性，以及另一种实现

    epubcfi是描述epub规范电子书中文本位置的一种描述符,它是形如" epubcfi(/6/4[Section0017.xhtml]!4/42/178/1:0,4/42/198/1:1) ...

  7. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  8. HTML5中的Range对象的研究（转载）

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  9. HTML5 页面编辑API之Range对象

    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...

随机推荐

  1. 自己在完第一遍STL和Directx 9.0 游戏开发编程基础书后的体会

    如果一本书看一遍就能看懂,说明书对自己相对容易,没有必要在去看第二遍,但是对于大多数书籍,都有自己陌生的知识,看完一遍无法理解的地方,说明就是自己知识点最薄弱的,最需要去理解的地方,一旦自己理解了这些 ...

  2. c# dev treelist 总结

    1:去掉左侧顺序号列 2: EnableAppearanceFocusedCell 允许/否获得焦点的单格使用外观 设置TreeList的OptionsSelection属性: 3:设置TreeLis ...

  3. Linux apt-get命令

    一.简介 Ubuntu系列系统包管理工具.   二.常用指令   1.查询功能 apt-cache search package 搜索软件包 apt-cache show package 获取包的相关 ...

  4. linux工具介绍

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/index.html 工具参考篇 1. gdb 调试利器 2. ldd 查看程序依赖库 3 ...

  5. iOS.CM5.CM4.CM2

    增量数据计算接口: CC_MDx_Init CC_MDx_Update CC_MDx_Final 全量数据计算接口: CC_MDx

  6. 09. pt-fingerprint

    vim pt-fingerprint.txt select name, password from user where id=5;select name, password from user wh ...

  7. oracle迁移

    #导出scott的数据,排除 table_a table_b expdp system/password schemas=scott directory=datadir dumpfile=scott_ ...

  8. SQL 中的Begin...End语句

    Begin...End通常用来表示一个语句块,其内部的代码可以包含一组T-SQL语句,可以理解为高级语言中的{},这样在使用while循环时才知道判断什么时候结束.

  9. python之常用字符串用法

    1.isdigit=indecimal(判断是否是数字) s=" print(s.isdigit()) 输出为:True 2.format(标识符) a =("I have a { ...

  10. 日志分析工具、日志管理系统、syslog分析

    日志分析工具.日志管理系统.syslog分析 系统日志(Syslog)管理是几乎所有企业的重要需求.系统管理员将syslog看作是解决网络上系统日志支持的系统和设备性能问题的关键资源.人们往往低估了对 ...