Front-end practice small project (2) table interlaced color change and stopwatch (including source code)

content

beginning

form wrapping

stopwatch

---

beginning

Hello~ Hello everyone! In this article, let's take a look at the second part of the front-end practice small project "Table Interlaced Color Change and Stopwatch".

First let's look at the effect.

form wrapping

First of all, let's look at the table color change, here is the same JS code and JQuery code.

Ideas:

Prepare table : table header (thead) and table body (tbody)
 Binding event : load event onload()
 Get element : Get table document.getElementById()
 Get the length of the row : the number of tr in the table body len
 Traversal : for
 judgment : Determine the parity line
Set background color : css

HTML code

Let's first look at the HTML code. Here we have a thead to set the header, a td to set the content of a cell, and tr to wrap the line.

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

Add some styles to him (CSS)

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

JS code:

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

Click Run, ok is done. So let's take a look at the JQuery code

    $(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 等等）。
    })

  stopwatch

Next, let's analyze how the stopwatch is implemented.

Ideas:

Get time : Get the current time of the system, get the hour, minute and second respectively.
Set the timer : run the specified code according to the cycle.
Bind event : bind the start button and the pause button.

Let's start with two divs, one is a square, round and rectangular block (with a span in it to represent text), and the other is two buttons (button) and set their ids respectively, the code is as follows:

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

Then we set the CSS properties of the rectangular block (the two buttons only have the centering effect written directly inside )

        .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;
        }

Write JS code:

    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();
    }

Click to run, ok runs perfectly, the JQuery code is given below

    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();
    });

(please pay attention) Continuing to update... 

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