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

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

开头

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

首先我们先来看效果。


表格换行

image.png

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

思路:

准备表格:表头(thead)和表体(tbody)

绑定事件:加载事件 onload()

获取元素:获取表格 document.getElementById()

获取行的长度:表体中tr的数量len

遍历:for

判断:判断奇偶行

设置背景颜色: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>

image.gif

再给他加点样式(CSS)

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

image.gif

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>

image.gif

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

image.gif

 秒表

4.gif

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

思路:

获取时间:获取系统当前时间,分别得到时、分、秒

设置定时器:按照周期来运行指定的代码

绑定事件:绑定开始开始按钮与暂停按钮

我们先来两个 div ,一个方圆形矩形块(里面在放个 span 表示文字),另一个放两个按钮(button)并分别设置它们的 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>

image.gif

然后我们设置矩形块的 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;
        }

image.gif

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

image.gif

点击运行,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();
    });

image.gif


源代码:https://gitee.com/a-programmer-named-zhui/front-end-project.git

相关文章
|
10天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
107 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
130 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
23天前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
60 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
1月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
179 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
64 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
2月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
100 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
56 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
168 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
2月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
111 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
2月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
38 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章