一.调色板实现思路

①实现网页布局

②给范围绑定事件

③将范围条目前处于的value赋值给右侧的兄弟元素

④修改顶部盒子的背景颜色

二.代码展示

jQuery下载的参考网址：传送门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>调色板</title><style>/* 清除默认样式 */*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;background-color: black;}</style><!-- 在项目中使用jq，需要引包  --><script src="js/jQuery.js"></script>
</head>
<body>  <header class="box"></header><p>R：<input type="range" min="0" max="255" value="0"><span>0</span></p><p>G：<input type="range" min="0" max="255" value="0"><span>0</span></p><p>B：<input type="range" min="0" max="255" value="0"><span>0</span></p>
</body>
</html>
<script>//选中input标签绑定事件（聚焦、失去焦点 → 与光标有关系的事件）//需要给范围绑定input事件。//当范围条（其他表单元素）设置的value数值发生变化的时候，立即触发这个事件。//①用JSON数据格式存储三个表单元素value数值var json={  //json是一个全局变量，存储了三条数据r:0,g:0,b:0}$("input:eq(0)").on("input",function(){ //使用了回调函数//获取表单元素value属性值  console.log($(this).val); //②设置当前表单元素兄弟节点的文本：$(this).siblings().html($(this).val());     //修改盒子背景颜色：$(".box").css({"background" :`rgb(122,132,142)`});//③用JSON数据格式存储一个表单元素valuejson.r=$(this).val();console.log(json);// ④设置盒子的背景颜色($('.box').css({// ` `是ES6的拼接符"background":`rgb(${json.r},${json.g},${json.b})`});});$("input:eq(1)").on("input",function(){ //使用了回调函数//②设置当前表单元素兄弟节点的文本：$(this).siblings().html($(this).val());     //③用JSON数据格式存储一个表单元素valuejson.g=$(this).val();console.log(json);// ④设置盒子的背景颜色($('.box').css({"background":`rgb(${json.r},${json.g},${json.b})`});});$("input:eq(2)").on("input",function(){ //使用了回调函数//②设置当前表单元素兄弟节点的文本：$(this).siblings().html($(this).val());     //③用JSON数据格式存储一个表单元素valuejson.b=$(this).val();console.log(json);// ④设置盒子的背景颜色($('.box').css({"background":`rgb(${json.r},${json.g},${json.b})`});});
</script>

三.总结

①表单元素可以结合事件input

当表单元素的value属性值发生变化的时候，这个事件会触发。

②JSON数据格式是以K-V形式存在的，可以同时存储多条数据。

篇章

上一篇：HTML5教程6-表单元素

下一篇：HTML教程8-视频

HTML5教程7-实战：调色板相关推荐

【JavaScript系列】JS基础语法_从变量到数组一网打尽_有教程有实战
[JavaScript系列]基础语法_从变量到数组一网打尽_有教程有实战 JavaScript基础语法目录基础语法延迟和异步脚本变量数据类型数据类型简介简单数据类型与复杂数据类型栈和堆 ...
HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
HTML5前端开发实战08-外语培训
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
HTML5教程8-视频
文章目录一.视频 1.代码展示 2.知识点二.自定义视频 1.代码展示 2.知识点篇章一.视频 1.代码展示 <!DOCTYPE html> <html lang=" ...
HTML5前端开发实战06-幸福表单
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
Html5教程和素材
HTML5 教程(摘录自 W3C School) HTML 5 简介(HTML5 是下一代的 HTML) 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标 ...
HTML5前端开发实战02-旅游网页面设计
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald
本节书摘来自异步社区<HTML5与CSS3实战指南>一书中的第2章,第2.5节,作者: [美]Estelle Weyl , Louis Lazaris , Alexis Goldstein ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...

HTML5教程7-实战：调色板

文章目录

一.调色板实现思路

二.代码展示

三.总结

篇章

HTML5教程7-实战：调色板相关推荐

最新文章

热门文章