利用mousover触发函数对range的操作练习

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>range测试</title>

        <script type="text/javascript">

            function myfunction(){

                var x=document.getElementById("rang").value;

                document.getElementById("text").value=x;

            }

            function myfunction2(){

                var x=document.getElementById("text2").value;

                document.getElementById("rang2").value=x;

            }

        </script>

    </head>

    <body> 

              <!--滑动range获得值-->

              <p>滑动range获得标值</p>

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

        <input type="range" id="rang" onmousemove="myfunction()"/><br/><br/><br/><br/><br/>

                <!--用值控制range-->

                <p>输入数字控制range值</p>

        <input type="text" id="text2" onmousemove="myfunction2()" placeholder="请输入0-100之间的数"/><br/>

        <input type="range" id="rang2" />

    </body>

</html>

input中range相关操作的更多相关文章

  1. 理解CSV文件以及ABAP中的相关操作

    在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...

  2. 记录工作中linux相关操作

    在项目部署之后,查看日志能查看部署结果是否正确部署. 最开始查看日志我会使用cat service.log tail -f service.log vim service.log 打开日志之后 /+查 ...

  3. c语言中文件相关操作

    一 .首先介绍一下数据文件的类型: 1.二进制文件(映像文件):在内存中以二进制形式存取. 2.文本文件(ascii文件):以ascii码形式存取的文件. 通俗的讲,在Mac下,你把一个文件丢进记事本 ...

  4. ueditor 插件集成到 xadmin 中的相关操作

    安装 点击这里下载源码包 在相关的虚拟环境下安装源码方式安装 切入解压后路径进行 python setup.py install 注册 安装成功按照普通app一般注册在 django 程序的app 中 ...

  5. Java中JSONObject相关操作

    maven项目pom配置: <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>js ...

  6. sqoop导入数据到hive表中的相关操作

    1.使用sqoop创建表并且指定对应的hive表中的字段的数据类型,同时指定该表的分区字段名称 sqoop create-hive-table --connect "jdbc:oracle: ...

  7. Django中查询相关操作

    查询集特性 1)惰性查询:只有在实际使用查询集中的数据的时候才会发生对数据库的真正查询. 2)缓存:当使用的是同一个查询集时,第一次使用的时候会发生实际数据库的查询,然后把结果缓存起来,之后再使用这个 ...

  8. Java中字符串相关操作（判断，增删，转换）

    1:判断字符串中是否包含某个字符(字符串): startsWith(): 这个方法有两个变体并测试如果一个字符串开头的指定索引指定的前缀或在默认情况下从字符串开始位置 此方法定义的语法如下: publ ...

  9. element-ui 中 el-table 相关操作

    1.带checkbox  获取所有选择的行. this.$refs.multipleTable.selection 获取选中的单行 this.$refs.roleTable.store.states. ...

随机推荐

  1. Spring4整合quartz2.2.3，quartz动态任务

    Spring4整合quartz2.2.3,quartz动态任务 >>>>>>>>>>>>>>>>> ...

  2. python appium 操作app

    下面是一些Python脚本中操作app的用法: 检查app安装情况(返回true/false), driver.is_app_installed(package_name) 安装app driver. ...

  3. [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  4. 安装python虚拟环境

    虚拟环境: 之前安装python包的命令: sudo pip3 install 包名包的安装路径:/usr/local/lib/python3.5/dist-packages安装同一个包的不同版本,后 ...

  5. LDMIA、LDMIB、LDMDB、LDMDA、STMIA、LDMFD、LDMFA、LDMED、LDMEA指令详解

    简介: ARM指令中多数据传输共有两种: LDM:(load  much)多数据加载,将地址上的值加载到寄存器上 STM:(store much)多数据存储,将寄存器的值存到地址上 主要用途:现场保护 ...

  6. 第2阶段——编写uboot之硬件初始化和制作链接脚本lds(1)

    目标: 1.关看门狗 2.设置时钟 3.初始化SDRAM (初始化寄存器以及清除bss段) 4.重定位 (将nand/nor中代码COPY到链接地址上,需要初始化nandflash,读flash) 5 ...

  7. poj 2723 二分+2-sat判定

    题意:给出n对钥匙,每对钥匙只能选其中一个,在给出每层门需要的两个钥匙,只要一个钥匙就能开门,问最多能到哪层. 思路:了解了2-SAT判定的问题之后主要就是建图的问题了,这里建图就是对于2*n个钥匙, ...

  8. [转载]dreamweaver代码提示失效

    原文地址:dreamweaver代码提示失效作者:云中雁 2007-03-23 12:19:22|  分类: 编程手记 |  标签:web2.0  javascript   |字号大中小 订阅 吴庆民 ...

  9. 搭建JSP开发环境

    所谓"工欲善其事,必先利其器",要进行JSP网站开发,首先需要把整个开发环境搭建好. JSP开发运行环境 -开发工具包JDK(Java Develop Kit),即Java开发工具 ...

  10. 201521123113《Java程序设计》第8周学习总结

    1. 本周学习总结 2. 书面作业 本次作业题集集合 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 remove函数中,开始我的写法是 for(int i=0;i<list.s ...