Coding Coffee产品页的like功能<html>
<head>
<meta charset="UTF-8">
<title>CODING COFFEE</title>
<style type="text/css">
h1{
color: blue;
font-size: 60px;
}
hr{
width: 60%;
border: 2px dashed #eee;
}
div{
text-align: center;
}
.content-wrapper{
width:750px;
margin:0 auto;
}
.img{
float:left;
}
.para{
float:right;
width:50%;
}
</style>
</head>
<body>
<div>
<h1>CODING COFFEE MENU</h1>
<hr>
</div>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c7.jpg">
</div>
<div class="para">
<h2 id="lanshan">蓝山咖啡</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c8.jpg">
</div>
<div class="para">
<h2 id="natie">拿铁咖啡</h2>
<p>作为在中国上市的第一款单一产地系列咖啡，东帝汶塔塔迈劳咖啡豆将当地的风味浓缩其中，一起来星巴克门店，感受它那平衡的草本风味吧。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c3.jpg">
</div>
<div class="para">
<h2 id="yishi">意式浓缩</h2>
<p>每一款臻选咖啡豆，都有着自己的个性和故事。它因人因地因天气而有着别样的风味。当你来到星巴克臻选门店，这场相遇才刚开始。和我们的黑围裙大师一起，用不同煮制方式，走进原产地的风情中。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c2.jpg">
</div>
<div class="para">
<h2 id="kabu">卡布奇诺</h2>
<p>一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡。此时咖啡的颜色，就像卡布奇诺教会的修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c5.jpg">
</div>
<div class="para">
<h2 id="moka">摩卡咖啡</h2>
<p>摩卡是一种“巧克力色”的咖啡豆(来自也门的摩卡),这让人产生了在咖啡混入巧克力的联想,并且发展出巧克力浓缩咖啡饮料。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<script type="text/javascript">
function loodAll(){
var item = document.getElementsByClassName("content-wrapper");
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/c111.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" οnchange="" 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="全 选" οnclick="allCheck()"/>
<input type="button" value="全不选" οnclick="NoneCheck()"/>
<input type="button" value="反选" οnclick="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>
<html>
<head>
<meta charset="UTF-8">
<title>CODING COFFEE</title>
<style type="text/css">
h1{
color: blue;
font-size: 60px;
}
hr{
width: 60%;
border: 2px dashed #eee;
}
div{
text-align: center;
}
.content-wrapper{
width:750px;
margin:0 auto;
}
.img{
float:left;
}
.para{
float:right;
width:50%;
}
</style>
</head>
<body>
<div>
<h1>CODING COFFEE MENU</h1>
<hr>
</div>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c7.jpg">
</div>
<div class="para">
<h2 id="lanshan">蓝山咖啡</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c8.jpg">
</div>
<div class="para">
<h2 id="natie">拿铁咖啡</h2>
<p>作为在中国上市的第一款单一产地系列咖啡，东帝汶塔塔迈劳咖啡豆将当地的风味浓缩其中，一起来星巴克门店，感受它那平衡的草本风味吧。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c3.jpg">
</div>
<div class="para">
<h2 id="yishi">意式浓缩</h2>
<p>每一款臻选咖啡豆，都有着自己的个性和故事。它因人因地因天气而有着别样的风味。当你来到星巴克臻选门店，这场相遇才刚开始。和我们的黑围裙大师一起，用不同煮制方式，走进原产地的风情中。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c2.jpg">
</div>
<div class="para">
<h2 id="kabu">卡布奇诺</h2>
<p>一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡。此时咖啡的颜色，就像卡布奇诺教会的修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<div class="content-wrapper" onClick="like(this)">
<div class="img">
<img src="./img/c5.jpg">
</div>
<div class="para">
<h2 id="moka">摩卡咖啡</h2>
<p>摩卡是一种“巧克力色”的咖啡豆(来自也门的摩卡),这让人产生了在咖啡混入巧克力的联想,并且发展出巧克力浓缩咖啡饮料。</p>
</div>
<div style="clear:both;"></div>
</div>
<hr>
<script type="text/javascript">
function loodAll(){
var item = document.getElementsByClassName("content-wrapper");
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/c111.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><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>请选择您的爱好：</h1>
<input type="checkbox" οnchange="" 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="全 选" οnclick="allCheck()"/>
<input type="button" value="全不选" οnclick="NoneCheck()"/>
<input type="button" value="反选" οnclick="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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
