前端实践小项目(二)表格隔行换色与秒表(含有源代码)

目录

开头

表格换行

秒表

---

开头

哈喽~大家好！这篇呢我们来看看前端实践小项目第二篇 “表格隔行换色与秒表” 。

首先我们先来看效果。

表格换行

首先我们先来看表格隔行换色，这里同样是给出 JS 代码与 JQuery 代码。

思路：

准备表格：表头（thead）和表体（tbody）
绑定事件：加载事件 onload()
获取元素：获取表格 document.getElementById()
获取行的长度：表体中tr的数量len
遍历：for
判断：判断奇偶行
设置背景颜色：css

HTML 代码

先来看 HTML 代码，我们这里一个 thead 设置表头，一个 td 设置一个单元格内容， tr 进行换行。

    
编号
姓名
性别
班级
科目
    

        
1
张一
男
1班
语文1
        
2
张二
女
2班
语文2
        
3
张三
男
3班
语文3
        
4
张四
女
4班
语文4
        
5
张五
女
5班
语文5
        
6
张六
男
6班
语文6
        
7
张七
男
7班
语文7
        
8
张八
女
8班
语文8
        
9
张九
女
9班
语文9
    

再给他加点样式（CSS）

JS代码：

点击运行，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 等等）。
    })

  秒表

接下来，我们来分析分析秒表是如何实现的。

思路：

获取时间：获取系统当前时间，分别得到时、分、秒
设置定时器：按照周期来运行指定的代码
绑定事件：绑定开始开始按钮与暂停按钮

我们先来两个 div ，一个方圆形矩形块（里面在放个 span 表示文字），另一个放两个按钮（button）并分别设置它们的 id，代码如下：

    10:00:00




    开始  
    暂停

然后我们设置矩形块的 CSS 属性（两个按钮只有居中效果直接写里面了）

        .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