コンテンツ

始まり

こんにちは〜みなさん、こんにちは！この記事では、フロントエンドの練習用の小さなプロジェクト「テーブルインターレースカラーチェンジとストップウォッチ」の第2部を見てみましょう。

まず、効果を見てみましょう。

フォームラッピング

まず、テーブルの色の変化を見てみましょう。これは同じJSコードとJQueryコードです。

アイデア：

テーブルの準備：テーブルヘッダー（thead）とテーブル本体（tbody）
バインディングイベント：ロードイベントonload（）
要素の取得：テーブルdocument.getElementById（）
行の長さの取得：テーブル本体のtrの数len
トラバーサル：
判断のため：決定パリティライン背景色
を設定ます：css

HTMLコード

最初にHTMLコードを見てみましょう。ここには、ヘッダーを設定するためのthead、セルのコンテンツを設定するためのtd、および行を折り返すためのtrがあります。

<table id="tab" border="1" align="center" width="60%">
    <thead><tr><th>编号</th><th>姓名</th><th>性别</th><th>班级</th><th>科目</th></tr></thead>
    <tbody>
        <tr><td>1</td><td>张一</td><td>男</td><td>1班</td><td>语文1</td></tr>
        <tr><td>2</td><td>张二</td><td>女</td><td>2班</td><td>语文2</td></tr>
        <tr><td>3</td><td>张三</td><td>男</td><td>3班</td><td>语文3</td></tr>
        <tr><td>4</td><td>张四</td><td>女</td><td>4班</td><td>语文4</td></tr>
        <tr><td>5</td><td>张五</td><td>女</td><td>5班</td><td>语文5</td></tr>
        <tr><td>6</td><td>张六</td><td>男</td><td>6班</td><td>语文6</td></tr>
        <tr><td>7</td><td>张七</td><td>男</td><td>7班</td><td>语文7</td></tr>
        <tr><td>8</td><td>张八</td><td>女</td><td>8班</td><td>语文8</td></tr>
        <tr><td>9</td><td>张九</td><td>女</td><td>9班</td><td>语文9</td></tr>
    </tbody>
</table>

彼にいくつかのスタイルを追加する（CSS）

    <style type="text/css">
        tr{
           text-align: center;
        }
    </style>

JSコード：

<script type="text/javascript">
    window.onload = function () {
        /*
        1.window.onload = function(){}; —-js
        2.$(window).load(function(){});——Jquery
        3.$(document).ready(function(){});–Jquery
        4.$(function(){});———————Jquery
         */
        var tab = document.getElementById("tab");//得到 table 的 id
        tab.children[0].style.backgroundColor = "#eabec3";
        var len = tab.tBodies[0].children.length; // Bodies[0]在table中的第一个tbody元素
        // tBodies 返回 table 中所有的tbody的元素，返回的是一个数组对象，
        for (var i = 0; i < len; i++) {
            if (i % 2 == 0){
                tab.tBodies[0].children[i].style.backgroundColor = "#f5dde0";
            }else{
                tab.tBodies[0].children[i].style.backgroundColor = "#fdbf50";
            }
        }
    }
</script>

[実行]をクリックすると、[OK]が完了します。それでは、JQueryコードを見てみましょう

    $(function () {
        $("thead tr").css("background-color","#eabec3");
        $("tbody tr:odd").css("background-color","#f5dde0");
        // odd 选择器选取带有奇数索引号的每个元素（比如：1、3、5 等等）。
        $("tbody tr:even").css("background-color","#fdbf50");
        // :even 选择器选取带有偶数索引号的每个元素（比如：0、2、4 等等）。
    })

ストップウォッチ

次に、ストップウォッチがどのように実装されているかを分析しましょう。

アイデア：

時刻の取得：システムの現在の時刻を取得し、それぞれ時、分、秒を取得します。タイマーを
設定します：サイクルに従って指定されたコードを実行します。イベントを
バインドます：開始ボタンと一時停止ボタンをバインドします。

2つのdivから始めましょう。1つは正方形、円形、長方形のブロック（テキストを表すスパンが含まれています）、もう1つは2つのボタン（ボタン）で、それぞれIDを設定します。コードは次のとおりです。

<div class="data">
    <span id="mydata">10:00:00</span>
</div>
<br>
<div style="text-align: center;">
    <button id="start">开始</button>&nbsp;&nbsp;
    <button id="stop">暂停</button>
</div>

次に、長方形のブロックのCSSプロパティを設定します（2つのボタンには、直接内側に書き込まれたセンタリング効果のみがあります）

        .data{
            background: #2c1654;
            //color: aliceblue;
            color: #fdbf50;
            width: 200px;
            height: 50px;
            border-radius: 20px;
            line-height: 50px;
            font-size: 30px;
            text-align: center;
            margin: auto;
        }

JSコードを書く：

    function getData() {
        var data = new Date();// 方法可返回当天的日期和时间。
        var h = data.getHours(); // 小时
        var f = data.getMinutes(); // 分钟
        var m = data.getSeconds(); // 秒

        h = fun(h);
        f = fun(f);
        m = fun(m);

        var time = h + ":" + f + ":" + m; // 定义格式
        document.getElementById("mydata").innerHTML = time;
    }

    function fun(t) { // 设置格式
        return t > 9 ? t : '0' + t;
    }

    var iddate;
    function startDate() {
        iddate = setInterval(getData,1000); // 计时器每1000毫秒（1秒）执行一次getData
    }

    function stopDate() {
        clearInterval(iddate);//  用于停止 setInterval() 方法执行的函数代码
    }

    window.onload = function () {
        getData();
        startDate();
    }

    document.getElementById("start").onclick = function () {// 绑定点击事件
        startDate();
    }

    document.getElementById("stop").onclick = function () {// 绑定点击事件
        stopDate();
    }

クリックして実行します。OKは完全に実行されます。JQueryコードを以下に示します。

    function getData() {
        var data = new Date();
        var h = data.getHours();
        var f = data.getMinutes();
        var m = data.getSeconds();
        h = fun(h);
        f = fun(f);
        m = fun(m);

        var time = h + ":" + f + ":" + m;
        $("#mydata").html(time);
    }

    function fun(t) { // 设置格式
        return t > 9 ? t : '0' + t;
    }

    var iddate;
    function startDate() {
        iddate = setInterval(getData,1000);
    }

    function stopDate() {
        clearInterval(iddate);
    }

    $(function () {
        getData();
        startDate();
    })

    $("#start").click(function(){
        startDate();
    });

    $("#stop").click(function(){
        stopDate();
    });

（注意してください）更新を続けます...

ソースコード：https ：//gitee.com/a-programmer-named-zhui/front-end-project.git

フロントエンド練習小プロジェクト（2）テーブルインターレース色変更とストップウォッチ（ソースコードを含む）

始まり

フォームラッピング

ストップウォッチ

おすすめ