直奔主题，今日分享就是两个小案例，帮助我们去融会贯通之前学过的JavaScript。
案例练习
1、九九乘法表
利用控制语句实现九九乘法表的打印。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>九九乘法表</title>
</head>
<body>
<!--
逻辑推导过程
<table>
<tr>
<td style="border: 1px solid black;">1 * 1 = 1</td>
</tr>
<tr>
<td style="border: 1px solid black;">1 * 2 = 2</td>
<td style="border: 1px solid black;">2 * 2 = 4</td>
</tr>
<tr>
<td style="border: 1px solid black;">1 * 3 = 2</td>
<td style="border: 1px solid black;">2 * 3 = 6</td>
<td style="border: 1px solid black;">3 * 3 = 9</td>
</tr>
</table>
-->
<script type="text/javascript">
// 使用DOM对象创建一个table，并写入body
document.write("<table>");
// 外圈控制行数
for (var i = 1; i <= 9; i++) {
// 使用DOM对象创建一个tr，并写入到body的table中
document.write("<tr>");
// 内圈控制个数
for (var j = 1; j <= i; j++) {
// 使用DOM对象创建一个td，并写入到body中的table中的tr中
//console.log(i + " * " + j + " = " + i*j);
document.write("<td style='border: 1px solid black;'>" + j + " * " + i + " = " + i*j + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
演示效果：
2、程序员求签
先看效果演示：
利用HTML+CSS+JS开发具有动态效果的程序员求签工具。
<!-- 必须写在HTML文件首行 --> <!DOCTYPE html> <!-- HTML文档的开始 --> <html> <!-- HTML文档的开头部分 --> <head> <!-- 文档属性 告诉浏览器采用什么编码解析文档 --> <meta charset="utf-8" /> <!-- 文档标题 --> <title>程序员求签</title> <!-- 引入外部css文件 --> <link rel="stylesheet" href="css/good_luck.css" /> <!-- HTML文档的开头结束 --> </head> <!-- HTML文档的主体部分开始 --> <body> <!-- 内容 --> <div id="container"> <!-- 标题 --> <div id="title"> 程序员求签<sup>beta</sup><!-- sup上标字 --> </div> <!-- 详细信息 --> <div id="info"> <b>求</b>婚丧嫁娶亲友疾病编程测试升职跳槽陨石核弹各类吉凶 </div> <!-- 日期时间 --> <div id="date"></div> <!-- 求签部分 --> <div id="good_luck"> <ul> <li>编码测试修复提交之前求一签，可避凶趋吉</li> <li>选择所求之事并在心中默念，再单击“求”即可</li> <li>同一件事只能求一次，下次再求请刷新页面</li> </ul> <table id="table"> <tr> <td>编码</td> <td>测试</td> <td>修复BUG</td> <td>提交代码</td> <td>其他</td> </tr> </table> </div> <!-- 求签结果 --> <div id="result"> <div id="check">请点击所求之事</div> <div id="ask">求</div> <div id="answer">超大吉</div> </div> <!-- 引入外部js文件 --> <script type="text/javascript" src="js/good_luck.js" ></script> </div> <!-- HTML文档的主体部分结束 --> </body> <!-- HTML文档的结束 --> </html>
good_luck.css
/* 采用什么编码解析文件 */
@charset "utf-8";
/*
* 使用id选择器渲染id="container"标签的样式
*/
#container {
width: 350px;/* 宽350px */
margin: 50px auto;/* 顶部外间距50px 居中 */
}
/* -------------------------标题 begin------------------------- */
/*
* 使用id选择器渲染id="title"标签的样式
*/
#title {
background: gray;/* 背景色灰色 */
color: white;/* 字体白色 */
font-weight: bold;/* 字体加粗 */
font-size: 20px;/* 字体大小 */
padding: 10px 20px;/* 设置内间距 */
margin-bottom: 10px;/* 设置底部外间距10px */
}
/* -------------------------标题 end--------------------------- */
/* -------------------------详细信息 begin---------------------- */
/*
* 使用id选择器渲染id="info"标签的样式
*/
#info {
font-size: 12px;/* 字体大小 */
text-align: center;/* 文本居中 */
color: red;/* 字体红色 */
}
/*
* 使用id选择器定位id="info"标签
* 然后渲染其子标签b的样式
*/
#info b {
background: crimson;/* 背景色深红色 */
color: white;/* 字体白色 */
padding: 0 3px;/* 设置内间距 */
margin: 0 3px;/* 设置外间距 */
}
/* -------------------------详细信息 end------------------------ */
/* -------------------------日期时间 begin---------------------- */
/*
* 使用id选择器渲染id="date"标签的样式
*/
#date {
font-size: 22px;/* 字体大小 */
font-weight: bold;/* 字体加粗 */
line-height: 40px;/* 行间距 */
text-align: center;/* 居中 */
border-bottom: 1px solid gray;/* 底部边框颜色灰色 粗细1px */
}
/* -------------------------日期时间 end------------------------ */
/* -------------------------求签部分 begin---------------------- */
/*
* 使用id选择器渲染id="good_luck"标签的样式
*/
#good_luck {
font-size: 14px;/* 字体大小 */
}
/*
* 使用id选择器定位id="table"标签
* 然后渲染其子标签tr的子标签td的标签样式
*/
#table tr td {
width: 100px;/* 宽100px */
background: #CCCCCC;/* 背景色 */
padding: 10px 0;/* 设置顶部和底部内间距10px 左右为0 */
text-align: center;/* 居中 */
cursor: pointer;/* 鼠标变手势 */
border-radius: 2px;/* 边角变圆角 */
}
/* 添加鼠标移动至指定元素的样式修改 */
#table tr td:hover {
background: #AAAAAA;/* 背景色 */
}
/* -------------------------求签部分 end------------------------ */
/* -------------------------求签结果 begin---------------------- */
/*
* 使用id选择器渲染id="result"标签的样式
*/
#result {
height: 200px;/* 高度200px */
border: 2px solid #FFAAAA;/* 边框颜色 粗细2px */
margin-top: 10px;/* 设置外间距 */
position: relative;/* 子标签相对于父标签定位 */
overflow: hidden;/* 超出标签范围内容隐藏 */
}
/*
* 使用id选择器渲染id="check"标签的样式
*/
#check {
text-align: center;/* 居中 */
font-size: 30px;/* 字体大小 */
padding-top: 70px;/* 设置顶部内间距70px */
}
/*
* 使用id选择器渲染id="ask"标签的样式
*/
#ask {
background: crimson;/* 背景色深红色 */
position: absolute;/* 相对于父标签使用绝对定位 */
top: 205px;/* 从父标签顶部开始计算 */
left: 0px;/* 从父标签左部开始计算 */
width: 100%;/* 宽度是其父元素的100% */
height: 100%;/* 高度是其父元素的100% */
font-size: 100px;/* 字体大小 */
font-weight: bold;/* 字体加粗 */
cursor: pointer;/* 鼠标变手势 */
text-align: center;/* 居中 */
line-height: 200px;/* 行间距 */
color: white;/* 字体白色 */
transition: all 0.5s;/* 所有样式改变效果耗时0.5秒 */
}
/*
* 使用id选择器渲染id="answer"标签的样式
*/
#answer {
background: white;/* 背景色白色 */
position: absolute;/* 相对于父标签使用绝对定位 */
top: 205px;/* 从父标签顶部开始计算 */
left: 0px;/* 从父标签左部开始计算 */
width: 100%;/* 宽度是其父元素的100% */
height: 100%;/* 高度是其父元素的100% */
font-size: 100px;/* 字体大小 */
font-weight: bold;/* 字体加粗 */
cursor: pointer;/* 鼠标变手势 */
text-align: center;/* 居中 */
line-height: 200px;/* 行间距 */
transition: all 0.5s;/* 所有样式改变效果耗时0.5秒 */
}
/* -------------------------求签结果 end------------------------ */
good_luck.js
/*
* 页面加载以后就执行的函数
*/
window.onload = function() {
// 创建日期对象
var today = new Date();
// 创建数组并初始化数组
var weeks = ["日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 "];
// 拼接字符串得到一个中文日期，并设置为id="date"的div标签的内容
document.getElementById('date').innerHTML = "今天是 " + today.getFullYear() + "年 " + (today.getMonth() + 1) + "月 " + today.getDate() + "日 星期" + weeks[today.getDay()];
// 根据标签名称获取所有td标签
var tds = document.getElementsByTagName('td');
// 循环遍历td标签，给每一个td都添加一个点击事件
for(var i = 0; i < tds.length; i++) {
// 添加点击事件
tds[i].onclick = function() {
// 根据id获取id="asd"的div标签，并设置其top属性为0px(标签样式0.5秒移动至0px)
document.getElementById('ask').style.top = '0px';
// 根据id获取id="card"的div标签，并设置其display属性为none(隐藏div)
document.getElementById('check').style.display = 'none';
// 根据id获取id="answer"的div标签，并设置其top属性为205px(标签样式0.5秒移动至205px)
document.getElementById('answer').style.top = '205px';
}
}
// 创建数组并初始化数组
var results = ['超大吉', '大吉', '吉', '小吉', '小凶', '凶', '大凶', '超大凶'];
// 根据id获取id="asd"的div标签，并添加点击事件
document.getElementById('ask').onclick = function() {
// 生成一个0~7的随机数
var num = Math.floor(Math.random() * 8);
// 根据随机数(下标)获取results数组内对应的求签结果，并设置为id="answer"的div标签的内容
document.getElementById('answer').innerHTML = results[num];
// 根据id获取id="answer"的div标签，并设置其top属性为0px(标签样式0.5秒移动至0px)
document.getElementById('answer').style.top = '0px';
// 根据id获取id="asd"的div标签，并设置其top属性为205px(标签样式0.5秒移动至205px)
document.getElementById('ask').style.top = '205px';
}
}
好了，这里就是今天分享的内容。如果想获取素材自己练习，可以去找码歌悠悠QQ ：1811119218 获取。