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

言归正传:

<!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. 正则表达式 re sys os random time 模块

    今天学习内容如下: 1.正则表达式 百度正则表达式在线测试,可以练习 正则表达式本身也和python没有什么关系,就是匹配字符串内容的一种规则.官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用 ...

  2. glide install失败 Update failed for golang.org/x/net: Cannot detect VCS

    失败信息: [WARN]    Unable to checkout golang.org/x/net[ERROR]    Update failed for golang.org/x/net: Ca ...

  3. Linux系统和性能监控之CPU篇

    Linux系统和性能监控之CPU篇 性能优化就是找到系统处理中的瓶颈以及去除这些的过程.本文由sanotes.net站长tonnyom在2009年8月翻译自Linux System and Perfo ...

  4. Linux下动态库使用小结

    转自:https://blog.csdn.net/jaylong35/article/details/6132087 1. 静态库和动态库的基本概念        静态库,是在可执行程序连接时就已经加 ...

  5. SWE_Browser编译

    QRD从android4.4开始使用SWE_Browser,android原始代码中不再提供Browser.最近在做一个QRD8916_113517 CMCC入库版本,需要使用SWE_Browser. ...

  6. solr之创建core（搜索核心，包括索引和数据）的方法

    我的solrhome为D:\solrHome\solr step1:进入solrHome会看到collection1文件夹,创建该文件夹的副本,重命名为product 进入product文件夹,进入d ...

  7. 【C++】c++中栈 队列 的应用

    C++中提供了STL模板statck 在使用的时候更为方便 除了一般的队列外 还有STL更有双向队列可以使用 #include<deque> 声明:deque <type > ...

  8. 【Linux】zlib安装

    zlib简介 zlib是提供数据压缩用的函式库,由Jean-loup Gailly与Mark Adler所开发,初版0.9版在1995年5月1日发表.zlib使用DEFLATE算法,最初是为libpn ...

  9. 经典矩阵快速幂之一-----poj3233(矩阵套矩阵

    题意:给你一个矩阵A,求S=A+A^2+A^3+...+A^k. 其实这个当时我看着毫无头绪,看了他们给的矩阵发现好!精!妙! 我们这样看 是不是有点思路! 没错!就是右上角,我们以此类推可以得到A+ ...

  10. 832. Flipping an Image

    class Solution { public: vector<vector<int>> flipAndInvertImage(vector<vector<int& ...