前端实践小项目(二)表格隔行换色与秒表(含有源代码)
目录
开头
表格换行
开头
哈喽~大家好！这篇呢我们来看看前端实践小项目第二篇 “表格隔行换色与秒表” 。
首先我们先来看效果。
表格换行
首先我们先来看表格隔行换色，这里同样是给出 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）
tr{ text-align: center; } JS代码：
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"; } } }点击运行，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
