前端实践小项目-阿里云开发者社区

前端实践小项目

2022-08-07 264

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 哈喽 ~ 大家好鸭！这篇我们来看看前端实践小项目第一篇 “五星好评与暂停取值”（底部有源代码）

哈喽 ~ 大家好鸭！这篇我们来看看前端实践小项目第一篇 “五星好评与暂停取值”（底部有源代码）

五星好评（JS版）

先看效果图

鼠标移动给出几星，移除取消几星。我们先看看拿 JS 是怎样的。

先写html，☆（白星）与★（黑心）可以去 word 里面打出来在插入 --> 符号那一栏里面。

<table align="center">
    <tr>
        <td id="1">☆</td>
        <td id="2">☆</td>
        <td id="3">☆</td>
        <td id="4">☆</td>
        <td id="5">☆</td>
    </tr>
</table>

然后写入 JS 代码

<script type="text/javascript">
    var tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        tds[i].style.cursor = "pointer";
        tds[i].onmouseover = function () {
            var index = this.id;
            for (var i = 0; i < index; i++) {
                tds[i].innerHTML = "★";
            }
            for (var j = tds.length; j > index; j--) {
                tds[i].innerHTML = "☆";
            }
        }
    }
</script>

点击运行，完成了。

五星好评（JQuery版）

我们在来看看 JQuery 代码

<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var tds = $("td");
    tds.each(function () {
        $(this).css("cursor", "pointer");
        $(this).mouseover(function () {
            var index = $(this).attr("id");
            for (var i = 0; i < index; i++) {
                $(tds[i]).html("★");
            }
            for (var j = tds.length; j > index; j--) {
                $(tds[i]).html("☆");
            }
        })
    })
</script>

点击运行，完成了。

暂停取值

先看效果

我们一个 div 装跳转文字，有两个按钮，一个隐藏另一个显示，两个按钮互相互斥。

先看 HTML 代码

<div align="center">
    <div id="box">
        今天吃什么？
    </div>
    <br>
    <input type="button" value="开始" id="start"/>
    <input type="button" value="结束" id="stop"/>
</div>

很简单，就一个 div 两按钮，我们在来点 CSS 美化一下

<style type="text/css">
        #box{
            border: 1px solid #cccccc;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
        }
    </style>

最后 JS 代码实现功能

<script type="text/javascript">
    var arr = ["烧烤","干锅煎肉饭","米粉","蜜雪冰城","鸡公煲","水饺","关东煮","炒饭","水果","牛肉汤","金针菇","凉皮","炸鸡","肉片","拌面","螺蛳粉","烤鸭","汉堡","黑鸭","无骨鱼","面包","花甲鸡","花雕醉鸡","黄焖鸡","手抓饼","日料","麻辣烫","纸包鸡","啵啵鱼","煲仔饭","猪脚饭","鸡腿","饺子","鸡排","烧鸭","烤冷面"];
    var box = document.getElementById("box");
    var start = document.getElementById("start");
    var stop = document.getElementById("stop");
    var index = 0;
    var timerId = null;
    stop.style.display = 'none';
    start.onclick = function () {
        timerId = setInterval(function () {
            box.innerText = arr[index];
            index++;
            if (index > arr.length - 1){
                index = 0;
            }
        },50);
        stop.style.display = 'block';
        start.style.display = 'none';
    }
    stop.onclick = function () {
        clearInterval(timerId);
        start.style.display = 'block';
        stop.style.display = 'none';
    }
</script>