11.15 作业

来源：互联网发布：淘宝评论福利在哪里找编辑：程序博客网时间：2024/05/22 18:54

完成check.html中的功能

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <h1>请选择您的爱好：</h1><input type="checkbox" onchange=""  />全选/全不选<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="allUncheck()"/><input type="button" value="反选" onclick="reverseCheck()"/><script type="text/javascript">    var checkboxes = document.getElementsByName('hobby');    function allCheck(){        for(var i=0;i<checkboxes.length;i++){            checkboxes[i].checked=true;        }    }    function allUncheck(){        for(var i=0;i<checkboxes.length;i++){            checkboxes[i].checked=false;        }    }    function reverseCheck(){        for(var i=0;i<checkboxes.length;i++){            checkboxes[i].checked=!checkboxes[i].checked;        }    }</script>   </body></html>

完成Coding Coffee产品页的like功能。

<html>    <head>        <title>coding coffee</title>        <meta charset="UTF-8">        <style type="text/css">            h1,h2{                text-align:center;            }            .b{                background-color:yellow;                /*border:2px solid red;*/                width:800;                margin:0 auto;            }            .c{                float:left;            }            .d{                float:right;                width:50%;            }        </style>    </head>    <body>        <h1>Coding Coffee Mennu</h1>        <br>        <div class="b" onclick="like(this)">            <div class="c">                <img src="../咖啡图片/c2.jpg">            </div>            <div class="d">                <h2 id="lanshan"><i>蓝山咖啡</i></h2>                <p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>            </div>            <div style="clear:both"></div>        </div>        <br>        <div class="b" onclick="like(this)">            <div class="c">                <img src="../咖啡图片/c3.jpg">            </div>            <div class="d">                <h2 id="natie"><i>拿铁咖啡</i></h2>                <p>作为在中国上市的第一款单一产地系列咖啡，东帝汶塔塔迈劳咖啡豆将当地的风味浓缩其中，一起来星巴克门店，感受它那平衡的草本风味吧。</p>            </div>            <div style="clear:both"></div>        </div>        <br>        <div class="b" onclick="like(this)">            <div class="c">                <img src="../咖啡图片/c5.jpg">            </div>            <div class="d">                <h2 id="yishi"><i>意式浓缩</i></h2>                <p>每一款臻选咖啡豆，都有着自己的个性和故事。它因人因地因天气而有着别样的风味。当你来到星巴克臻选门店，这场相遇才刚开始。和我们的黑围裙大师一起，用不同煮制方式，走进原产地的风情中。</p>            </div>            <div style="clear:both"></div>        </div>        <br>        <div class="b" onclick="like(this)">            <div class="c">                <img src="../咖啡图片/c7.jpg">            </div>            <div class="d">                <h2 id="kabu"><i>卡布奇诺</i></h2>                <p>A smooth, lild blend of coffees from Mexico. Bolivia and Guatemala.</p>            </div>            <div style="clear:both"></div>        </div>        <br>        <div class="b" onclick="like(this)">            <div class="c">                <img src="../咖啡图片/c8.jpg">            </div>            <div class="d">                <h2 id="moka"><i>摩卡咖啡</i></h2>                <p>A smooth, lild blend of coffees from Mexico. Bolivia and Guatemala.</p>            </div>            <div style="clear:both"></div>        </div>        <script type="text/javascript">            function lg(a){                console.log(a);            }        function loodAll(){            var item = document.getElementsByClassName("b");            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('../咖啡图片/love.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>

阅读全文

0 0