【码歌】养兵千日用兵一时，你准备好了吗？

最新推荐文章于 2024-09-06 09:42:20 发布

码歌大大

最新推荐文章于 2024-09-06 09:42:20 发布

阅读量272

点赞数 1

分类专栏：前端必会文章标签：码歌前端内容 JavaScript

本文链接：https://blog.csdn.net/u014332333/article/details/88692094

版权

前端必会专栏收录该内容

11 篇文章 0 订阅

订阅专栏

直奔主题，今日分享就是两个小案例，帮助我们去融会贯通之前学过的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 获取。