フロントエンドプラクティス小規模プロジェクト（1）5つ星の賞賛と中断された価値

こんにちは〜みなさん、こんにちは！この記事では、フロントエンドの実践的な小さなプロジェクトの最初の「5つ星の賞賛と一時停止の価値」を見てみましょう（下部のソースコード）

コンテンツ

5つ星の賞賛（JSバージョン）

最初にレンダリングを見てください

マウスの動きは星を与え、除去は星をキャンセルします。最初にJSを使用するのがどのようなものかを見てみましょう。

最初にhtmlを記述します。☆（白い星）と★（黒いハート）は単語に移動して、[挿入]->[記号]列に入力できます。

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

[実行]をクリックすると完了です。

5つ星の賞賛（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>

[実行]をクリックすると完了です。

一時停止値

効果を最初に見てください

ジャンプテキストと2つのボタンを備えたdivがあり、1つは非表示で、もう1つは表示されており、2つのボタンは相互に排他的です。

最初にHTMLコードを見てください

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

非常にシンプルで、1つのdivと2つのボタンだけです。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

フロントエンドプラクティス小規模プロジェクト（1）5つ星の賞賛と中断された価値

5つ星の賞賛（JSバージョン）

5つ星の賞賛（JQueryバージョン）

一時停止値

おすすめ