html5中颜色范围,HTML5输入范围:将runnable-track的颜色更改为当前值
该方法类似于颜色渐变 check this one,
所以你需要做的是根据范围输入,根据每个颜色的当前百分比混合两种颜色,所以在这种情况下,输入的每一边都代表一种颜色。
为了达到这个目的,你需要玩一些数学,因此你还需要将颜色转换为数学形式,如RGB。
然后计算新的颜色百分比,将它们加在一起,最后得到新的颜色。
所以您需要以下功能:
//The following functions to convert the Hex color to RGB
function hexToR(h) {
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h) {
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h) {
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h) {
return (h.charAt(0) == "#") ? h.substring(1, 7) : h
}
//Convert resulted color to Hex
function rgbToHex(R, G, B) {
return "#" + toHex(R) + toHex(G) + toHex(B)
}
function toHex(n) {
n = parseInt(n, 10);
if (isNaN(n))
return "00";
n = Math.max(0, Math.min(n, 255));
return "0123456789ABCDEF".charAt((n - n % 16) / 16)
+ "0123456789ABCDEF".charAt(n % 16);
}
//Mixing colors in one new color
function colorMix(color1, color2, value) {
var color1Value = value;
var color2Value = 100 - value;
var colorR = ((color1Value / 100) * hexToR(color1)) + ((color2Value / 100) * hexToR(color2));
var colorB = ((color1Value / 100) * hexToB(color1)) + ((color2Value / 100) * hexToB(color2));
var colorG = ((color1Value / 100) * hexToG(color1)) + ((color2Value / 100) * hexToG(color2));
return rgbToHex(colorR, colorG, colorB);
}
这是一个有效的DEMO:Jsfiddle
html5中颜色范围,HTML5输入范围:将runnable-track的颜色更改为当前值相关推荐
- HTML5中是否有浮点输入类型?
本文翻译自:Is there a float input type in HTML5? According to html5.org , the "number" input ty ...
- html5中图片热点,HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高. 下面是HTML部分: #heatmap{background-image:url("ma ...
- html5中自动播放,HTML5自动播放一次(HTML5 autoplay once)
HTML5自动播放一次(HTML5 autoplay once) 以下javascript函数提供并自动播放音频文件(通过HTML 5音频标签),在6秒时切换mp3播放并从头开始循环+自动播放音频. ...
- html5中制作表格,(html5表格的制作.doc
(html5表格的制作 教学项目五 HTML中表格的制作 [教学内容] 讲解HTML中制作表格的标志 [教学目的] 使学生掌握简单表格的制作 [教学重点] 表格中单元格的合并操作 [教学难点] 理解属 ...
- 怎么在html5中插入vr,HTML5:2分钟给VR场景加交互
VR场景让用户以360度的方式体验品牌.产品或服务 HTML5:网页如何播放VR视频中介绍了使用play2VR能轻松为网页增加VR场景. 想象预约看房,售楼小姐带领客户漫步小区,选择户型,参观样板房, ...
- html5 中keygen用法,HTML5: keygen 标签
在线示例 带有 keygen 字段的表单: 示例html> 基础教程(nhooo.com) 用户名: 加密: 注意: Internet Explorer 不支持 keygen 标签. 测试看看 ...
- html5中的h1,HTML5语义 - 产品列表中的h1用法
我们正在讨论在产品列表页面中使用h1标签.有几个方面可以用来过滤产品.HTML5语义 - 产品列表中的h1用法 技术上明智的做法是使用多个h1标签,如果这些标签被封装在section或article中 ...
- 怎么在html5中加入视频,html5怎么嵌入视频
首先我们要知道HTML5是支持直接在浏览器中播放音频和视频文件的,不需要使用 adobe flash 插件. 插件缺点:插件是令浏览器崩溃的主要原因之一,特别是 flash,存在着很多问题. (视频学 ...
- html5中audio兼容性,HTML5 Audio API与兼容性
备用(当浏览器不支持audio时显示的内容) audio 的控制函数主要有: 控制函数 功能说明 load() 加载音频.视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加 ...
- HTML5中CLASS选择器,html5 class选择器
html5的确给我们带来惊喜, 新增的dom api-类选择器 那么怎样使用呢?看下面的代码吧..... JavaScriptvar els = document.getElementsByClass ...
最新文章
- Krona绘制物种或功能组成圈图
- POJ 1664 把苹果
- BadI /ui2/catalog_provider_bd
- C++模板剖析:函数模板、类模板解析
- unity vs没有智能提示_Unity博主营地你不可不知的Unity C#代码小技巧
- 简单的签到代码_PHP实现一个小小的签到功能,到底用MySQL还是Redis?
- div固定在浏览器顶部_关于浏览器的兼容问题
- Xamarin.Android 隐藏软键盘
- NPOI设置Excel中的单元格识别为日期
- 动态RAM的集中刷新、分散刷新、异步刷新
- Spark的那些外部框架
- 仿抖音上下滑动播放视频
- firefox 模拟手机
- 微pe工具箱有linux版吗,微PE工具箱
- 锚杆拉拔试验弹性模量计算_锚杆拉拔试验检测标准
- 生态丨人大金仓与超图集团共商战略新发展、共营和谐新生态!
- 万能的5款工具推进活动策划方案
- BIG-ENDIAN VS LITTLE-ENDIAN
- 局域网联机_七日杀v17.2(B27)版/支持局域网联机/多项修改器/初始存档/局域网联机教程...
- 【LM】电池电量水平低 保留电池电量 关键级别电池电量水平
热门文章
- Python常见问题解决记录1-Non-ASCII character ‘\xe7‘错误
- 计算机视觉空间域(spatial)注意力机制——CBAM
- 剑指offer 面试题63. 股票的最大利润
- Python实战从入门到精通第八讲——字符串与文本2之合并拼接字符串
- 如何安装python3.7.2_Python3.7与Python2.7在centos7下兼容并存
- 跨境电商ERP管理,让你节约跟多时间!
- 鸿蒙系统华为mate10,从3899跌至1040,2K分辨率+4000mAh,可升级鸿蒙系统
- 227 Puzzle
- 树状数组相关应用之多叉树子树问题
- Java基础(二)——面向对象