[ Demo ] 巧用img-date 涂色卡实例

最新推荐文章于 2021-11-25 22:27:36 发布
最新推荐文章于 2021-11-25 22:27:36 发布
阅读量276 收藏 1
点赞数 3
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45027204/article/details/105388192
版权

轻松愉快的涂色卡

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom操作初探</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            position: fixed;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .green{
            top: 50px;
            left: 25%;
        }
        .red{
            top: 50px;
            left: 44.5%;
        }
        .yellow{
            top: 50px;
            left: 64%;
        }
        /* .clear{
            top: 50px;
            left: 65%;
        } */
        ul{
            margin: 100px auto;
            width: 500px;
            height: 500px;
            list-style-type: none;
            border: 2px solid #096;
        }
        li{
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <button class="yellow" onclick="wrapyellow()">点击切换黄色</button>
    <button class="green" onclick="wrapgreen()">点击切换绿色</button>
    <button class="red" onclick="wrapred()">点击切换红色</button>
    <!-- <button class="clear" onclick="clear()">清空</button> -->
    <ul>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
        <li img-date="0"></li>
    </ul>
    <script>
        // function clear(){
        //     window.location.replace("http://127.0.0.1:5500/dom.html");
        // }
         function wrapyellow() {
            var ul = document.getElementsByTagName('ul')[0];
            ul.onmouseover = function(e) {
                var event = e || window.event;
                var target = event.target || event.srcElement;
                target.style.backgroundColor = "rgb(255,255,"+target.getAttribute('img-date')+")";
                target.setAttribute('img-date',parseInt(target.getAttribute('img-date'))+ 30);
            }
         }
        function wrapgreen() {
            var ul = document.getElementsByTagName('ul')[0];
            ul.onmouseover = function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            target.style.backgroundColor = "rgb(0,255,"+target.getAttribute('img-date')+")";
            target.setAttribute('img-date',parseInt(target.getAttribute('img-date'))+ 30);
        }
        }
        function wrapred() {
            var ul = document.getElementsByTagName('ul')[0];
            ul.onmouseover = function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            target.style.backgroundColor = "rgb(255,0,"+target.getAttribute('img-date')+")";
            target.setAttribute('img-date',parseInt(target.getAttribute('img-date'))+ 30);
        }
        }
    </script>
</body>
</html>

在这里插入图片描述

芬贝
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
安卓应用-教育学习-宝宝涂色学颜色手机版 v3.70.216p.zip
09-15
安卓应用-教育学习
Javascript中的图像数据对象：Image、ImageData 和 ImageBitmap
jimojianghu的专栏
01-16 9220
前端处理图片数据，有几个常用的API，如Image、ImageData、ImageBitmap等。这些对象可以为我们操作图片带来较大帮助，方便我们更好的利用JavaScript来加载图像资源，并控制图像像素点，进行一些处理操作。
访问IplImage像素的值，为负数，需转换为uchar。
我的征途是星辰大海
04-01 3715
http://www.opencv.org.cn/index.php/Template:FAQ#.E6.80.8E.E4.B9.88.E8.AE.BF.E9.97.AE.E5.9B.BE.E5.83.8F.E5.83.8F.E7.B4.A0 怎么访问图像像素 （坐标是从0开始的，并且是相对图像原点的位置。图像原点或者是左上角 (img->origin=IPL_ORIGIN_TL)
Tracy JS 小笔记 - Dom 操作
weixin_48702807的博客
06-02 112
DOM = Document Object Model Dom 是一个方法，提供了 JS 可以操作 html 和 xml 的方法. DOM 不能操作 CSS. 我们不能在一个 .css 文件里删除某个 class 或者添加东西。 我们看起来的改了某元素的 css 其实是改了 html 元素的行内样式。 学 DOM 开始 一切系统给我们生成的成组的方式 比如 "getElementsByClassName("");"，基本都是类数组是不能写 push 方法的 DOM 继承树 就是一系列继承关系 N
data:image/png;base64是什么
weixin_30645617的博客
06-01 5212
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFF...
区间DP-----涂色问题
ZZU_LGY
11-25 543
1.[CQOI2007]涂色PAINT 题目链接 f[i][j]为左边界为i，右边界为j的最小涂色次数 如果 s[i]==s[j] f[i][j]=min(f[i+1][j],f[i][j-1]) 否则 f[i][j]=min(f[i][j],f[i][k]+f[k+1][j]) (i=<k<j) #include <iostream> #include <cstring> #include <algorithm> using namespace std;
蓝桥杯递推--墙壁涂色
我叫鱿鱼须的博客
10-03 271
题目： 蒜头君觉得白色的墙面好单调，他决定给房间的墙面涂上颜色。他买了3 种颜料分别是红、黄、蓝，然后把房间的墙壁竖直地划分成 n 个部分，蒜头希望每个相邻的部分颜色不能相同。他想知道一共有多少种给房间上色的方案。 例如，当n=5时，下面就是一种合法方案。 蓝红黄红黄 由于墙壁是一个环形，所以下面这个方案就是不合法的。 蓝红黄红蓝 Input 一个整数t，表示数据的组数。（1≤t≤100） t个整数n，表示房间被划分成多少部分。（1≤n≤50） Output t个整数，表示每组给墙壁涂色的合法方案数。 Sa
e语言-少儿涂色游戏
08-23
少儿涂色游戏源码，软件是一款少儿益智游戏，送给小朋友的玩具软件。
安卓应用-教育学习-宝宝涂色学颜色手机版 v3.70.216p 安卓版.zip
09-15
安卓应用-教育学习
建筑施工组织2021-004涂色镀锌钢板门窗安装.doc
05-19
建筑施工组织2021-004涂色镀锌钢板门窗安装.doc
html标签中 lang="en-US"和lang="zh-CN"的区别，你知道吗？
热门推荐
alalasheep的博客
01-09 3万+
我们在初学html时，可能会发现编辑器默认生成的格式是<html lang="en"></html>,其实这也是有原因的，lang是language的缩写，代表该网页属于哪一个国家或是地区的网页。下面列举几个常用lang： en-US 英国(美国) zh-CN 中文(简体，中国大陆) zh-SG 中文(简体，新加坡) zh-HK 中文(繁体，香港) zh-MO ...
HTML/CSS/JS表白特效 一学就会
alalasheep的博客
07-31 9122
HTML/CSS/JS表白特效 一学就会 效果 小姐姐爱了爱了，看到效果后是不是很想学呐～～ let‘s go~~ 代码如下 CSS部分 <style> body{ margin:0%;/*外边距 解决各浏览器兼容性问题*/ padding:0%;/*内边距 解决各浏览器兼容性问题*/ ...
图文详解 video和audio元素的属性、事件及使用
alalasheep的博客
04-04 4019
集合类型定义 集合操作符 集合处理方法 集合类型应用场景
[ CSS-CSS3 ] 更适合你的CSS样式一览表
alalasheep的博客
04-05 3831
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和positionCSS3CSS3(I) 圆角边框与阴影CSS3(II) 文本与文字CSS3(III) 2D转换...
html/css 个人网站实例(一)
alalasheep的博客
04-04 2511
显示效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
html/css 简单的表单实例
alalasheep的博客
03-27 2307
如何实现如下图片的内容？下面我们一起制作该表单页面 如下图是布置的作业 如下图是完成的作业 实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
python如何截取yolov7-segmentation涂色区域
最新发布
07-12
要截取 YOLOv7-segmentation 涂色区域，你可以按照以下步骤进行操作： 1. 首先，使用 YOLOv7-segmentation 模型对图像进行分割，得到每个像素的类别和对应的颜色。 2. 根据任务需求，确定你想要截取的涂色区域的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值