一篇文章带你用jquery mobile设计颜色拾取器
qiyuwang 2024-12-20 18:16 18 浏览 0 评论
【一、项目背景】
现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。
我们可以通过 jquery mobile去设计颜色的拾取器，得到我们想要的颜色值。同时可以验证RGB表的颜色值。
【二、项目准备】
框架：jquery mobile
软件：Dreamweaver
1、去官网 jQuerymobile.com 下载jquery mobile。
2、在你的网页中添加 jQuery Mobile
你可以通过以下几种方式将jQuery Mobile添加到你的网页中：
- 从 CDN 中加载 jQuery Mobile (推荐)。
- 从jQuerymobile.com 下载 jQuery Mobile库。
3、导入jQuery Mobile
<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.js"></script>【三、项目目标】
1、滑动滑块将对应的颜色显示在页面。
2、实现输入框，输入对应的RBG值，将结果显示在页面上。
【四、项目实现】
1、创建三层div块。（头部，中部，尾部）。
<body>
<div data-role="page" ">
<div data-role="header">
<h1>拾色器</h1>
</div>
<div data-role="content" class="color"> </div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>头部显示文字，中部颜色显示区域，尾部显示滑动条。
2、创建一个表单（用三个input来分别存放RGB这三种颜色）。
<form>
<input name="red" id="red" min="0" max="255" value="0" type="range" " />
<input name="green" id="green" min="0" max="255" value="0" type="range"" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" />
</form>3、添加CSS样式
<style type="text/css">
.color {
height: 100%;
min-height: 400px;
}
</style>4、添加 JS
1） 定义(set_color()方法)获取相对于颜色的id属性。
<script>
function set_color(){
var red = $("#red").val(); //获取红色数值
var green = $("#green").val(); //获取绿色数值
var blue =$("#blue").val(); //获取蓝色数值
}
</script>2）生成rgb表示的颜色字符串。
var color = "RGB("+red+","+green+","+blue+")"; //生成rgb表示的颜色字符串3）设计内容框背景色。
$(".color").css("background-color",color); //设计内容框背景色5、调用set_color()。
<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" />【五、效果展示】
1、点击运行。
2、点击f12进入开发者模式，点击蓝色框框切换手机模式运行。
3、滑动任意一条滑动条。得到想要的颜色。
4、手动输入RGB（0-255）值，得到相对应的颜色，如下图所示。
【六、总结】
1、使更多的人去了解jQuery Mobile， jQuery可以快速找到文档中的html元素，并对其进行操作，如隐藏、显示、改变样式...”。
2、本项目主要学习了input标签（类型：滑动条）如何与js绑定，获取事件响应。
3、颜色拾取器项目中，随机产生颜色这个难点进行了有效的分析，并提供解决方案。
4、按照操作步骤，自己尝试去做。自己实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
5、需要本文源码的小伙伴，后台回复“颜色拾取”四个字，即可获取。
****看完本文有收获？请转发分享给更多的人****
IT共享之家
入群请在微信后台回复【入群】
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
相关推荐
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
-
在2015年12月,我在PayPal商业网站(manager.paypal.com)中发现了一个严重的漏洞,这个漏洞的存在,使得我可以通过不安全的JAVA反序列化对象,在PayPal的网站服务器上远程...
- 提醒:Apache Dubbo存在反序列化漏洞
-
背景：近日监测到ApacheDubbo存在反序列化漏洞（CVE-2019-17564），此漏洞可导致远程代码执行。ApacheDubbo是一款应用广泛的高性能轻量级的JavaRPC分布式服务框架...
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
-
近日，我中心技术支撑单位监测到WebLogicT3存在反序列化0day高危漏洞，攻击者可利用T3协议进行反序列化漏洞实现远程代码执行。...
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
-
在对Apachedubbo的CVE-2023-23638漏洞分析的过程中，通过对师傅们对这个漏洞的学习和整理，再结合了一些新学的技巧运用，从而把这个漏洞的利用向前推了一步。整个过程中的研究思路以及...
- 案例|WebLogic反序列化漏洞攻击分析
-
目前网络攻击种类越来越多，黑客的攻击手段也变得层出不穷，常规的防护手段通常是对特征进行识别，一旦黑客进行绕过等操作，安全设备很难发现及防御。通过科来网络回溯分析系统可以全景还原各类异常网络行为，记录所...
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
-
近日，我中心技术支撑单位监测发现ApacheOFBiz官方发布安全更新，修复了一处远程代码执行漏洞。成功利用该漏洞的攻击者可造成任意代码执行，控制服务器。该漏洞编号：CVE-2021-26295，安...
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
-
近日，国家信息安全漏洞共享平台（CNVD）公布了OracleWebLogicwls9-async反序列化远程命令执行漏洞。攻击者利用该漏洞，可在未授权的情况下远程执行命令。该漏洞安全级别为“高危”。现...
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
-
Serde是一个用于序列化和反序列化Rust数据结构的库。它支持JSON、BSON、YAML等多种格式，并且可以自定义序列化和反序列化方式。Serde的特点是代码简洁、易于使用、性能高效。...
- Java反序列化漏洞详解（java反序列化漏洞利用）
-
Java反序列化漏洞从爆出到现在快2个月了，已有白帽子实现了jenkins，weblogic，jboss等的代码执行利用工具。本文对于Java反序列化的漏洞简述后，并对于Java反序列化的Poc进行详...
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
-
安全公告编号:CNTA-2018-00222018年7月18日，国家信息安全漏洞共享平台（CNVD）收录了OracleWebLogicServer反序列化远程代码执行漏洞（CNVD-2018-13...
- CVE-2020-9484 Apache Tomcat反序列化漏洞浅析
-
本文是i春秋论坛作家「Ybwh」表哥原创的一篇技术文章，浅析CVE-2020-9484ApacheTomcat反序列化漏洞。01漏洞概述这次是因为错误配置和org.apache.catalina....
- 告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)
-
0x01前言...
- 关于WebLogic反序列化高危漏洞的紧急预警通报
-
近日，WebLogic官方发布WebLogic反序列化漏洞的紧急预警通告，利用该漏洞可造成远程代码执行并直接控制Weblogic服务器，危害极大。该漏洞编号为：CVE-2019-2890，安全级别为“...
- 高危!Fastjson反序列化漏洞风险通告
-
漏洞描述...
- 学习Vulhub的Java RMI Registry 反序列化漏洞
-
这个实验，我们先通过dnslog演示命令执行，然后通过反弹shell获得root权限。JavaRemoteMethodInvocation用于在Java中进行远程调用。RMI存在远程bind的...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- PayPal严重漏洞可通过不安全的JAVA反序列化对象
- 提醒:Apache Dubbo存在反序列化漏洞
- 【预警通报】关于WebLogicT3存在反序列化高危漏洞的预警通报
- Apache dubbo 反序列化漏洞(CVE-2023-23638)分析及利用探索
- 案例|WebLogic反序列化漏洞攻击分析
- 【预警通报】关于ApacheOFBizRMI反序列化远程代码 执行高危漏洞的预警通报
- 关于OracleWebLogic wls9-async组件存在反序列化远程命令执行高危漏洞的预警通报
- Rust语言从入门到精通系列 - Serde序列化/反序列化模块入门指北
- Java反序列化漏洞详解（java反序列化漏洞利用）
- 关于Oracle WebLogic Server存在反序列化远程代码执行漏洞的安全公告
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)