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

言归正传:

<!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. 为什么说windows会死机，Linux不会死机

    通常所说的死机是指操作没有响应了,但是操作系统的核心仍然在工作.在windows中,由于只有一个界面,没有响应就是死机了:而在Linux中可有tty1-tty7,死了一个开另外一个把死了的那个杀掉就可 ...

  2. C++中的fstream,ifstream,oftream

    https://blog.csdn.net/kingstar158/article/details/6859379 先mark一个大佬的随笔,有时间再回头看 总结: 使用ifstream和ofstre ...

  3. 厉害了，PS大神真的能改变世界！

    今天要介绍的这位PS大神 名叫 Katrina Yu 她的操作真的神了 不管多普通的场景 她都能帮你改头换面 在后院破旧的椅子上喝着咖啡 一转眼就骑着魔法扫帚 飞上了天,与月亮肩并肩 看原图还以为是在 ...

  4. UI设计教程分享：6个不能错过的UI设计网站

    Ui设计学习的人越来越多了,想要找到合适的学习资料很难,很多才接触ui设计且没有基础的同学也不知道去哪里找学习资料,虽然现在百度上很容易搜到ui设计的学习资料,但是一看不难发现,很多都是过时的学习资料 ...

  5. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  6. STL基础2：vector中使用结构体

    #include <iostream> #include <vector> #include <numeric> #include <algorithm> ...

  7. Python 中Lambda 表达式 实例解析

    Lambda 表达式 lambda表达式是一种简洁格式的函数.该表达式不是正常的函数结构,而是属于表达式的类型.而且它可以调用其它函数. 1.基本格式: lambda 参数,参数...:函数功能代码 ...

  8. python之常用模块篇5

    一.日志模块,logging模块 1)logging模块简单使用,屏幕输出.默认级别30 import logging logging.debug( logging.info( logging.war ...

  9. centos7 hive + 远程mysql 搭建笔记

    1.require:java环境,本地可用的hadoop,远程可访问的mysql 2.拷贝hive文件(hive-2.2.1) 3.设置环境变量 export HIVE_HOME=/data/spar ...

  10. idea如何将项目以eclipse保存

    会生成 提交到svn     eclipse 导入 首先使用TortoiseSVN下载要导入的项目 导入 已经存在的maven 项目       clean install -DskipTests t ...