Front-end practice small project (1) Five-star praise and suspended value

Hello~ Hello everyone! In this article, let's take a look at the first "five-star praise and pause value" of the front-end practice small project (source code at the bottom)

content

Five-star praise (JS version)

Five-star praise (JQuery version)

Pause value

---

Five-star praise (JS version)

First look at the renderings

Mouse movement gives stars, removal cancels stars. Let's take a look at what it's like to take JS first.

Write html first, ☆ (white star) and ★ (black heart) can go to word and type them out in the Insert --> Symbol column.

<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>

Then write JS code

<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>

Click Run and you're done.

Five-star praise (JQuery version)

Let's take a look at the JQuery code

<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>

Click Run and you're done.

Pause value

First look at the effect

 We have a div with jump text and two buttons, one is hidden and the other is displayed, and the two buttons are mutually exclusive.

Look at the HTML code first

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

It's very simple, just one div and two buttons, let's beautify it with CSS

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

Finally, the JS code implements the function 

<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>

We have an array "arr" here. If you change the content, you can modify it in between, or you can add pictures in it.

Click Run to complete the effect.

(Continuing to update...)

The Blue Bridge Cup has come to an end, and now we are waiting for the results. The next task is the soft test in May. Next, we will update the knowledge of soft engineering, soft test, operating system, and accounting network. come on! ! !

(Seeking attention)

Source code: https://gitee.com/a-programmer-named-zhui/front-end-project.git