一篇文章带你用jquery mobile设计颜色拾取器
yuyutoo 2024-11-14 19:54 3 浏览 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/
相关推荐
- JavaWeb开发入门需要学哪些?看完你就懂了
-
目前，国内外信息化建设已经进入基于Web应用为核心的阶段，Java作为应用于网络的最好语言，前景无限看好。然而，就算用Java建造一个不是很烦琐的web应用，也不是件轻松的事情。那么，本文章就来详细说...
- Spring Boot 中如何实现通过Cookie来实现用户鉴权?
-
Cookie是存储在用户浏览器中的一小段数据，主要的作用是用来帮助Web服务器和客户端之间的通信。这段数据由服务端生成，然后通过HTTP的头部信息反馈给客户端，然后再后续的操作中客户端会自动将这些Co...
- Session和cookie笔记 session与cookie的关系
-
会话技术1.会话：一次会话中包含多次请求和响应。*一次会话：浏览器第一次给服务器资源发送请求，会话建立，直到有一方断开为止2.功能：在一次会话的范围内的多次请求间，共享数据3.方式：1.客户...
- 精读大型网站架构的技术细节:后端架构规整化Cookie和Session
-
Cookie和Session接口请求（HTTP请求）是无状态的，每次请求都是完全独立的。也就是说，在处理请求时，Web应用服务器无法得知这个请求是哪个用户发送的，无法跟踪上一次请求的状态。但是，有些时...
- 一文彻底搞懂Cookie、Session、Token到底是什么
-
一、Cookie洛：大爷，楼上322住的是马冬梅家吧？大爷：马都什么？夏洛：马冬梅。大爷：什么都没啊？夏洛：马冬梅啊。大爷：马什么没？夏洛：行，大爷你先凉快着吧。在了解这三个概念之前我们...
- Python常用的第三方包-Requests 5个常用python第三方库
-
在现代互联网时代，进行网络请求是开发人员经常需要处理的任务之一。Python的Requests包是一个强大而易于使用的工具，可以简化网络请求的过程，并提供了丰富的功能。本文将深入介绍如何使用Pytho...
- 干货 | REST-assured 获取日志到文件并结合 Allure 报告进行展示
-
使用Rest-assured集合Allure运行完用例之后，在生成的报告中只有断言信息，没有请求的日志信息。而当我们的用例失败时，特别是接口失败时，请求日志是分析原因的第一手资源。那如何将R...
- 前后端数据交互(四)——fetch 请求详解
-
fetch是XMLHttpRequest的升级版，使用js脚本发出网络请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比XMLHttpReques...
- 【0基础学爬虫】爬虫基础之网络请求库的使用
-
大数据时代，各行各业对数据采集的需求日益增多，网络爬虫的运用也更为广泛，越来越多的人开始学习网络爬虫这项技术，K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章，为实现从易到难全方位覆盖，特设【0基础学爬...
- ASP.NET MVC开发日常一:SessionID更新
-
在MVCWeb开发中临时存储数据一般会用到Session，Cookie，ViewBag，ViewData，TempData。每个的使用场景是不同，具体区别有空再补上。Session数据最敏感，最需要...
- 如何抓取有密码网页表格数据?简单易行!
-
众所周知，表格是一种常见的数据展示方式，而在网络世界中，许多网站也会采用表格的形式展示数据。但如果需要抓取这些表格中的数据，尤其是有帐号密码保护的网页，该如何实现呢？本文将为大家提供一种简单易行的方法...
- 不背锅运维:Grafana的自动登入(Go和Python分别实现)
-
1.实现目标想要达到的目标是：当在浏览器向http://192.168.11.254:3090/auto_login这个地址发起GET请求后能够自动登入Grafana...
- Python每日一库之requests python爬虫之requests库的下载
-
Pythonurllib...
- Javaweb知识 day16 Cookie&Session
-
今日内容1.会话技术1.Cookie2.Session2.JSP：入门学习一、会话技术1.1概念：会话：浏览器第一次给服务器资源发送请求，会话建立，直到有一方断开为止，一次会话中包含多次请...
- 全网最全的python网络爬虫常用技术
-
前言urllib模块urllib库是python中自带的模块，也是一个最基本的网络请求库，该模块提供了一个urlopen()方法，通过该方法指定URL发送网络请求来获取数据。正文urllib是一个收...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- JavaWeb开发入门需要学哪些?看完你就懂了
- Spring Boot 中如何实现通过Cookie来实现用户鉴权?
- Session和cookie笔记 session与cookie的关系
- 精读大型网站架构的技术细节:后端架构规整化Cookie和Session
- 一文彻底搞懂Cookie、Session、Token到底是什么
- Python常用的第三方包-Requests 5个常用python第三方库
- 干货 | REST-assured 获取日志到文件并结合 Allure 报告进行展示
- 前后端数据交互(四)——fetch 请求详解
- 【0基础学爬虫】爬虫基础之网络请求库的使用
- ASP.NET MVC开发日常一:SessionID更新
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)