like功能以及check功能
2024-05-11 01:54:51
Coding Coffee产品页的like功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CODING COFFEE</title><style type="text/css">/*background-image:url('IMG_0396.JPG');*/h1{background-color:rgba(255,0,0,0.1);}.introduce{width: 1080px;border: 2px ridge red;margin:0 auto;padding:10px;}.lanshan{float:left;}.para{float:right;width:50%}h1,h2{text-align:center;}body{background-image:url('');background-repeat:repeat;background-attachment:fixed;}
</style></head>
<body><div><h1>CODINF COFFEE MENU<h1><hr></div><div class="introduce" onClick="like(this)"><div><img class="lanshan" src="./img./1.png" height="200"></div><div class="para"><h2 id="lanshan">蓝山咖啡</h2><p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。</br>如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p></div><div style="clear:both;"></div></div><hr><div class="introduce" onClick="like(this)"><div><img class="lanshan" src="./img./1.png" height="200"></div><div class="para"><h2 id="natie">拿铁咖啡</h2><p>每一款臻选咖啡豆，都有着自己的个性和故事。它因人因地因天气而有着别样的风味。<br>当你来到星巴克臻选门店，这场相遇才刚开始。和我们的黑围裙大师一起，用不同煮制方式，走进原产地的风情中。</p ></div><div style="clear:both;"></div></div><hr><div class="introduce" onClick="like(this)"><div><img class="lanshan" src="./img./1.png" height="200"></div><div class="para"><h2 id="yishi">意式咖啡</h2><p>作为在中国上市的第一款单一产地系列咖啡，东帝汶塔塔迈劳咖啡豆将当地的风味浓缩其中，<br>一起来星巴克门店，感受它那平衡的草本风味吧。</p ></div><div style="clear:both;"></div></div><hr><div class="introduce" onClick="like(this)"><div><img class="lanshan" src="./img./1.png" height="200" ></div><div class="para"><h2 id="kabu">卡布基诺</h2><p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。<br>如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p ></div><div style="clear:both;"></div></div><hr><div class="introduce" onClick="like(this)"><div><img class="lanshan" src="./img./1.png" height="200"></div><div class="para"><h2 id="moka">摩卡咖啡</h2><p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。<br>如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p ></div><div style="clear:both;"></div></div><hr> <script type="text/javascript">function loadAll(){var item = document.getElementsByClassName("introduce");for(var i=0;i<item.length;i++){item[i].style.setProperty("background-image","none");}if(localStorage.length>0){for(var i=0;i<localStorage.length;i++){var id = localStorage.key(i);document.getElementById(id).parentNode.parentNode.style.setProperty("background-image","url('./img./5.jpg')");}}}function like(obj){var id = obj.childNodes[3].childNodes[1].id;var name = obj.childNodes[3].childNodes[1].innerHTML;for(var i=0;i<localStorage.length;i++){if(localStorage.key(i)==id){localStorage.removeItem(id);console.log(localStorage);loodAll();return;}}localStorage.setItem(id,name);loodAll();console.log(localStorage);}</script>
</body>
</html>
check.html中的功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>请选择您的爱好：</h1>
<input type="checkbox" onchange="" checked="checked" />全选/全不选<br />
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />游泳
<input type="checkbox" name="hobby" />唱歌 <br />
<input type="button" value="全 选" onclick="allCheck()"/>
<input type="button" value="全不选" onclick="NoneCheck()"/>
<input type="button" value="反选" onclick="fanzhuanCheck()"/><script type="text/javascript">function lg(a){console.log(a);}var checkbox = document.getElementsByName('hobby');function allCheck(){for(var i=0;i<checkbox.length;i++)checkbox[i].checked=true;}var checkbox = document.getElementsByName('hobby');function NoneCheck(){for(var i=0;i<checkbox.length;i++)checkbox[i].checked=false;}var checkbox = document.getElementsByName('hobby');function fanzhuanCheck(){for(var i=0;i<checkbox.length;i++)checkbox[i].checked=!checkbox[i].checked;}
</script>
</body></html>like功能以及check功能相关推荐
- SAP MM IV中的Duplicated Invoice Check功能的测试
SAP MM IV中的Duplicated Invoice Check功能的测试 进入如下界面: 比如1000公司代码下我勾选了Check Company Code和Check Reference标记 ...
- SQL Server 2016 SP1中的新功能和增强功能
SQL Server 2016 SP1 is released as announced by Microsoft. It comes with a bunch of new features and ...
- CUDA功能和通用功能
CUDA功能和通用功能 本文描述了类似于CUDA ufunc的对象. 为了支持CUDA程序的编程模式,CUDA Vectorize和GUVectorize无法产生常规的ufunc.而是返回类似ufun ...
- 隐藏esp_仅需一分钟教你看懂汽车内的隐藏功能，哪些功能是你不知道的？
车内的按键多种多样,而且越高档的车,按键就越多.除了少数国产车,绝大部分车辆的按键标识都是用英文字母表示,从而导致不少车主只能通过查看说明书才知道是什么意思. 今天小编整理了车内各种按键标识,不是很清 ...
- ML.NET生成器带来了许多错误修复和增强功能以及新功能
ML.NET是一个开源的跨平台机器学习框架,适合 .NET 开发人员.它允许将机器学习集成到 .NET 应用中,而无需离开 .NET 生态系统,甚至拥有 ML 或数据科学背景.ML.NET工具(Vis ...
- Python模块和包：导入制作模块、name、模块定位顺序(文件名与模块名重复、功能名与功能名重复、函数名与功能名重复、变量名与模块名重复)、from 模块名 import *__all__列表、包
一.模块 Python 模块(Module),是⼀个 Python ⽂件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块能定义函数,类和变量,模块⾥也能包含可执⾏的代码. ...
- PostgreSQL 12：新功能和增强功能
目录 介绍 新功能和增强功能 CTE增强 生成列 重新索引改进 默认情况下启用JIT编译 查询并行性改进 PL/pgSQL增强 SQL / JSON路径查询 分区改进 拼写改进 MCV统计信息现在支持 ...
- 在Delphi中使用Action降低水平功能和业务功能的耦合
权限和日志管理是较为常见的水平功能,而且需求比较灵活,通常硬编码到程序中. 本文将对Delphi中的Action进行扩充实现将权限和日志管理功能从主程序中分离. 1. 常见的方法是将权限管理和日志 ...
- Nginx服务器的压缩功能和缓存功能
介绍 在Nginx服务器配置文件中可以通过配置Gzip的使用,可以配置在http块,server 块或者location块中设置,Nginx服务器可以通过ngx_http_gzip_module模块. ...
最新文章
- LR11之web_reg_find文本检查点的使用
- C++ Primer 5th笔记（chap 14 重载运算和类型转换）lambda函数对象
- 条件随机场（CRF）和隐马尔科夫模型（HMM）最大区别在哪里？CRF的全局最优体现在哪里？
- 动态规划应用--“杨辉三角”最短路径 LeetCode 120
- LOJ2361「NOIP2016」组合数问题
- 2018尚硅谷Git和GitHub视频教程
- 黑金全部开发板资料（FPGA+ZYNQ）分享
- 人生之路优化，bug修复
- 关于防火墙DMZ区的使用和防火墙的DMZ区域规则的配置
- Win7 远程桌面连接不上
- DBVisualizer导入excel数据
- PyCharm vs VSCode 到底谁更牛？
- 酒水知识(六大基酒之伏特加_Vodka)
- 华为linux系统能用Cad么,华为平板能装cad画图吗 华为平板可以用cad软件吗？
- 消息称勒索软件可逃避PC防御、Office漏洞补丁能被攻击者绕过｜12月24日全球网络安全热点
- 华为机试python打印机_华为校园招聘上机笔试题 扑克牌大小（python）
- 【香蕉oi】耍望节（数位DP+倍增优化）
- 安卓apk在CentOS上自动化编译打包发布
- mysql 圆周率_mysql - π=3.1415926 - 博客园
- no protocal specified