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

言归正传:

<!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. 页面练习my blog day51

    html端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 1.git使用入门之基本的更新提交操作

    在项目开发中使用git的规范,避免因为不规范的操作带来额外的工作量 更行代码 git pull 提交代码 .查看状态 git status .添加到本地缓存 git add .(所有,也可以单个添加) ...

  3. 扩展、委托、Lambda、linq

    1.扩展 扩展是一个很有用的功能.如果你有一个类.不能修改,同时你又想给他加一个方法.这个过程就是扩展.扩展就是扩展方法. 例1: 类People public class People { publ ...

  4. sql重复数据的过滤问题

    有重复数据主要有一下几种情况: 1.存在两条完全相同的纪录 这是最简单的一种情况,用关键字distinct就可以去掉 example: select distinct * from table(表名) ...

  5. 如何让一个Java新手快速入门？

    问题中问到如何让java新生快速入门,既然想快速入门的话那最简单粗暴的方法就是多看视频,加上跟着视频敲代码,刚开始可能不知道是什么意思,敲得多了就慢慢知道是什么意思了. 刚开始建议在网上找那种结合自己 ...

  6. jsonp，ajax，json问题

    JSONP技术 JSONP是解决跨域问题的一种常见方式 跨域问题,因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 同源策略:只有在同协议.同域名.同端口的情况下才能进去数据交互 ...

  7. day2-pycharm创建项目，driver下载和浏览器设置

    对于ie需要设置,才能使用ie做测试 火狐的使用不能超过43版本,ie11现在有多次弹出alert无法识别其内容的问题 https://github.com/SeleniumHQ/selenium/w ...

  8. pycharm 创建文件时，自动添加文件头注释

    File->settings->Editor->File and Code Templates->Python Script # -*- coding: utf-8 -*- & ...

  9. 对团队项目的NABCD的分析

    需求(N):我们的软件是面向广大想记录自己所爱动植物成长点滴的人.目前没有很好地软件,只有手机或者电脑上的笔记本和备忘录. 做法(A):我们的软件可以交流可以节约积累知识的时间,将记录从记事本中摘出来 ...

  10. SpringBoot注册Servlet/Filter/Listener

    由于SpringBoot默认是以jar包的方式启动嵌入式的Servlet容器来启动SpringBoot的web应用,那么没有web.xml文件,如何配置我们的三大Web基础组件呢? 通过使用XXXRe ...