like功能以及check功能

来源：互联网发布：20中国每年移民数据编辑：程序博客网时间：2024/05/22 08:42

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>

阅读全文

0 0