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

言归正传:

<!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. devexpress之barManager 使用

    这次我不想使用ribboncontrol 控件 作为窗口菜单栏,也不想用传统的那种字体的方式 标题栏 一.Bars 1.   把BarManager组件添加到窗体中后,会自动创建两个空的 bars: ...

  2. 抽象类，override，final和类模板

    抽象类: **有些函数由于信息不够具体,而无法实现** 由此而来的纯虚函数:在基类中声明的纯虚函数,在基类中无法实现(是因为在基类中定义的信息不够具体,不是学的知识不够),于是这个函数没办法规定具体的 ...

  3. uva 103(最长递增子序列) Stacking Boxes

    大意是有一些n维的物体,他的边也是n条,如果将一个物体的边按任意顺序排列,只要有一种排列满足一一对应小于另一物体的边,就可以将这个物体嵌套进去另一个物体中,文最多能连续嵌套几个物体. 所求的最多的连续 ...

  4. 关于ip包长度

    http://blog.csdn.net/naturebe/article/details/6712153 这篇文章总结的不错,转自:http://hi.baidu.com/to_wait/blog/ ...

  5. RNA Sequencing

    RNA Sequencing 选择其他单元: RNA Sequencing 国内领先的转录组定序基地 Transcriptome Sequencing可全面性并快速地获得某一物种特定细胞或组织在某一状 ...

  6. tiny cc 编译器,tinycc,变种

    去掉了 -run 参数 下载代码和编译好的程序

  7. 终于搞定Fastreport2.x PDF输出，相信其他版本也差不多

    这个版本有powerpdf可以支持,但有bug, 经过反复摸索,终于搞定. 基本可用. 主要是中英文混合在一起,如果按中文输出,会有英文宽度也是中文的宽度了,格式变化,不可 接受. 而按英文输出,又是 ...

  8. Creating Your Own PHP Helper Functions In Laravel

    By Hamza Ali LAST UPDATED AUG 26, 2018  12,669 104 Laravel provides us with many built-in helper fun ...

  9. Spring ConversionService 类型转换（二） ConversionService

    Spring ConversionService 类型转换(二) ConversionService Spring 系列目录(https://www.cnblogs.com/binarylei/p/1 ...

  10. MySQL复制(Replication)

    引自:http://www.cnblogs.com/hustcat/archive/2009/12/19/1627525.html 1.复制概述 1.1.复制解决的问题数据复制技术有以下一些特点:(1 ...