HTML5区域范围文本框实例页面
CSS代码:
input { font-size: 14px; font-weight: bold; } input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;} output { display: block; font-size: 5.5em; font-weight: bold; }
HTML代码:
<form method="post"> <h4>音量控制</h4> <input type="range" name="range" min="0" max="10" step="1" value="" /> <output name="result"> </output> </form>
JS代码:
(function() {var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; // 检测浏览器是否是足够酷 // 识别range input. var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('不好意思,你的浏览器还不够酷,试试最新的Opera浏览器吧。'); // 设置初始值 // 无论是否本地存储了,都设置值为5 range.value = cachedRangeValue; result.value = cachedRangeValue; // 当用户选择了个值,更新本地存储 range.addEventListener("mouseup", function() { alert("你选择的值是:" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。"); localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。"); }, false); // 滑动时显示选择的值 range.addEventListener("change", function() { result.value = range.value; }, false); })();
转载于:https://www.cnblogs.com/zhujiabin/p/4485090.html
HTML5区域范围文本框实例页面相关推荐
- css实现的图片悬停旋转弹出文本框html页面前端源码
大家好,今天给大家介绍一款,css实现的图片悬停旋转弹出文本框html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 当鼠标经过图片的时候,就会激活旋转和文本弹出事件,非常适合用在图片展 ...
- html5简介的文本框,HTML5实战与剖析之表单——文本框脚本
文本框类型 在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签.这两种标签比较相似,但是他们也有区别. 如果一定要用input ...
- 点击文本框后页面变大
原因:HTML中默认是认为16px的字体,人才能看清楚,所以,当点击文本框的时候,当前文本框会以字体16px的大小显示(即字体小于16px页面会变大). 解决原理:设置文本框的的字体为16px: 解决 ...
- [微信小程序专题] 文本框和页面分割线
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题 如何制作一个文本框,并改变其在页面所处位置? 如何在页面 ...
- html 点击空白关闭浮层,js中点击空白区域时文本框与隐藏层的显示与影藏问题...
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. function $(id){ retur ...
- html怎么设置好看的文本框,html页面输入框input的美化
input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同 例如: 上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式 以下是一个简单的文 ...
- html5简介的文本框,html5的文本框样式有哪些
用户提问 输入框景背景透明: 鼠标划过输入框,输入框背景色变色: 输入字时输入框边框闪烁(边框为小方型): function borderColor(){ if(self['oText'].style ...
- 怎样美化html文本框,html页面输入框input的美化
input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同 例如: 上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式 以下是一个简单的文 ...
- html5 canvas画文本框,HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法. (1)绘制文本方法:fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的 ...
最新文章
- 关于 Caused by: java.lang.NoClassDefFoundError: com/alipay/api/AlipayApiException 解决办法
- VMWare安装Linux系统之CentOS-6.6
- 数字图像处理:第十章 离散图象变换
- 世界上最牛的网络设备,价格低廉,其貌不扬......
- 在 Mac 安装Docker
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
- jwt php tp5,TP5框架中使用JWT的方法示例
- MySQL8.0数据库配置注意事项
- nginx反向代理转发apache配置 之 cookie去哪儿了?
- 怎么恢复初始状态_妊娠纹怎么消 这三种美食帮你去除妊娠纹
- 软路由做网站服务器怎么样,为啥我不用双软路由(三)低成本和高体验
- 迅捷路由器造成计算机无法上网,迅捷FAST无线路由器设置好了却上不了网现象的原因及解决方法介绍...
- 2022中元节前后几天不出门?前三天后三天不能出门是真的吗?
- 各大国外网站后台管理模块
- 深度学习基础:评价标准——TP、FN、FP、TN、AP、MAP
- Bugku_隐写 [Study notes][MISC]
- Webpack前端资源加载/打包工具
- python每隔5秒执行一次
- word使用计算机,计算机Word办公软件的使用及操作分析
- 如何破解电脑开机密码
热门文章
- python绘制散点图-Python:matplotlib绘制散点图
- python编写爬虫的步骤-python学习: 写网络爬虫程序的三个难点
- python 类-Python 变量类型
- python装饰器原理-深刻理解python装饰器
- python安装步骤win10-教你如何在Win10系统安装Python?
- 学python好不好-26岁了,自学Python怎么样?
- python学精通要多久-学Python编程难吗 从入门到精通学习Python要多久
- python资料百度网盘-python自动保存百度盘资源到百度盘中的实例代码
- python输入输出-Python input()和print()终端输入输出
- 用python画月亮的代码-用 Python 画一个超级月亮