前端实践小项目(一)五星好评与暂停取值

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

五星好评（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>

我们这里有一个数组 “arr” 如果换内容的话可以之间在里面修改，或者可以在里面添加图片。

点击运行，完成效果。

（持续更新中……）

蓝桥杯告一段落了，现在就等成绩了，接下来的任务是5月份的软考，接下来会更新软工、软测、操作系统、计网等知识。加油！！！

（求关注）

源代码：https://gitee.com/a-programmer-named-zhui/front-end-project.git

前端实践小项目(一)五星好评与暂停取值

五星好评（JS版）

五星好评（JQuery版）

暂停取值

猜你喜欢