一篇文章带你用jquery mobile设计颜色拾取器
myzbx 2025-01-20 15:11 15 浏览
【一、项目背景】
现实生活中，我们经常会遇到配色的问题，这个时候去百度一下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/
相关推荐
- 斐波那契时钟:据说智商太低的人看不懂，你敢来挑战吗?
-
如果你在一个公共场合，看到了桌上亮着的东西，你会以为它是什么？小夜灯？恭喜你，回答错误。它是Fibonacci钟，专为追求与众不同的“怪胎们”准备。它外表精美，甚至看不出这是一个钟，但它真的是个钟，只...
- 曾都区文峰学校二年级数学组开展钟表制作主题活动
-
为了使学生更加直观地认识钟表、感知钟表，曾都区文峰学校二年级数学组开展了“小钟面大创意”钟表制作主题活动。孩子们大胆设计、精心制作，每一个作品都充满了创意与童趣。 滴答滴答滴答，小小时钟在说话。它都...
- 不能更酷!游戏机改造的报时钟表（游戏机能改成正常机吗）
-
当家里的游戏机逐渐过时的时候，你会把它怎么办？无论是卖掉还是封存珍藏都是不错的办法，不过Rurue0111有更酷的主意：将PlayStation改造成时钟。初代PS正脸有一个圆圆的硕大光驱盒盖，别...
- 计量小知识来了!古代没有钟表，夜晚是如何计算时间的?
-
古人把一昼夜分为十二个时辰，用十二地支名加上“时”字表示。即子时、丑时、寅时、卯时、辰时、巳时、午时、未时、申时、酉时、戌时、亥时。每一时刻相当于今天的两个小时。这十二时辰与现今计时法的关系是：子时－...
- 「爱」的挂钟（爱的时钟）
-
鸳鸯和天鹅算是鸟类中最会秀恩爱的了吧，以它们为元素做设计也应该是件很优雅的事。台湾的好事（haoshi）工作室成立于2009年。设计师坚持纯洁与和平的设计理念，将生活中抽象的好事物以艺术化的形式呈...
- 亚洲最大欧米茄时钟亮相北京王府井百货 钟面直径约7.9米
-
亚洲最大欧米茄(OMEGA)时钟正式亮相北京地标性建筑王府井百货（专题阅读）大楼。作为迄今为止亚洲最大的欧米茄时钟，甫一亮相即吸引到众多游客的目光。至此，位于北京最繁华地带的王府井大街将被欧米茄时钟...
- 初一数学难点“线段与角”，老师手把手教你画图，保证学会
-
期中考试已过去，学生们的学习进了一个新的阶段，每个科目的老师又开始兢兢业业开始了他们的讲授之路。现以初一数学为例，具体说说现阶段的数学学习什么？如何去高效学习？在现阶段，学生们开始学习了一些简单的几何...
- 科技感十足的悬浮时钟（悬浮 时钟）
-
说起来磁悬浮已经不是什么新鲜事儿了，自从有了磁悬浮列车，好像所有的东西都可以跟磁悬浮扯上关系。一个来自瑞典的设计团队FLYTE设计了一款叫做STORY的时钟，利用磁悬浮技术，让时钟的指针飞了起来~▽设...
- 一上数学 第七单元 认识钟表 逐字稿
-
(bluehouse456全文整理）同学们大家好，老师，这里准备了一些图片，你知道是什么吗？是钟表。钟表在我们的生活中经常遇到，你知道钟表有什么作用吗？是的，钟表可以帮助人们计时安排一天的工作和学习...
- 人教版数学一年级上册第七单元《认识钟表》知识要点:
-
一、认识钟面1.钟面结构钟面上有12个数字，按顺时针方向排列，代表1到12时。分针：又细又长的指针，转动较快，指示分钟。时针：又粗又短的指针，转动较慢，指示小时。指针转动方向为顺时针（从左到右）。2...
- 浔阳小学一年级数学组举行钟表制作活动
-
九江新闻网讯（伍巧红）12月23日，浔阳小学一年级数学组组织学生进行制作钟表的活动。孩子们利用双休日与父母共同参与了这项活动。这次钟面设计手工制作活动，属于数学“设计与应用”领域。钟表与学生的生活息息...
- 时钟指针夹角计算公式（时钟夹角万能公式）
-
关于时钟指针夹角问题，小学应该有一定的认识，一些特殊情况下的夹角，学生能顺利求出。在初一数学《角》的教学中，我们对夹角问题会有更深入的了解。设定钟面时间为a时b分，此时，时针与分针夹角是多少呢？有没有...
- 雨城区四小教育集团汉碑校区一年级数学组开展“创意钟面”制作比赛
-
四川新闻网雅安5月6日讯为丰富学生的课余生活，培养创新思维和动手操作能力，复习巩固新学的《钟面的认识》，使学生进一步掌握“整时、几时半、大约几时”等知识点。近日，雨城区四小教育集团汉碑校区一年级数学...
- 一大波奇奇怪怪的钟表来袭，你见过几个?
-
别再问时间都去哪了，其实时间都去了设计师的脑洞里……No.1音乐时钟DINN意大利设计师AlessandroZambelli为钟表品牌Diamantini&Domeniconi设...
- 瑞士国铁钟表Mondaine:分秒不差的精准，穿越七十年的经典
-
在瑞士，时间不仅是数字，更是一种艺术。当你踏入瑞士任何一个火车站，目光一定会被站台上那简洁优雅的挂钟吸引——纯白的钟面、清晰的黑色刻度，再配上一根醒目的红色圆头秒针，仿佛在无声地诉说着瑞士人对精准与美...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)