0


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

哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目的五星好评与暂停取值。(底部有源代码)

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


本文转载自: https://blog.csdn.net/aasd23/article/details/124085917
版权归原作者 一个名叫追的程序猿 所有, 如有侵权,请联系我们删除。

“前端实践小项目(JS与JQuery)五星好评与暂停取值”的评论:

还没有评论