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

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

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

C#实现树型结构TreeView节点拖拽的简单功能，附全部源码，供有需要的参考
为什么80%的码农都做不了架构师?>>> 应用软件是否好用就体现在一些细节操作上,开发人员是否考虑到了很多细节,例如一个树形结构的数据若不支持拖拽功能那用起来会很糟糕一些,用户 ...
如何制作一张圣诞贺卡二维码？
欢乐的圣诞歌已经响起,圣诞节马上就要到了. 全世界的基督教国家都在为迎接这个一年一度最为隆重的节日做准备.装扮圣诞树.准备圣诞礼物.圣诞贺卡.制作圣诞节的美味食物.组织策划圣诞活动--甚至隔着大洋和互 ...
μC/OS-II 源码阅读笔记 —— 内核深度剖析
一个程序猿郁结十年的青苹果 Bush 2014-4-24 前言此文发表在此,由于正吃菜的我才疏学浅,文中难免有错误的地方,欢迎看官和过客指正批评,痛骂也无妨,我虚心接受所有的鄙视. 目录概述缩略 ...
第6章 RTX 操作系统源码方式移植
以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章教程为大家将介绍 RTX 操作系统源码方式移植,移植工作比较简单,只需要用户添加需要的源码文件即可, ...
Android Glide图片加载框架（二）源码解析之with()
文章目录一.前言二.如何阅读源码三.源码解析 1.with() Android Glide图片加载框架系列文章 Android Glide图片加载框架(一)基本用法 Android Glide图 ...
Android图片加载框架最全解析（二），从源码的角度理解Glide的执行流程
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/53939176 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索郭 ...
深入HotSpot虚拟机源码探究synchronized底层实现原理【万字总结synchronized】
文章目录一.synchronized原理 (1)首先准备好HotSpot源码 (2)解压,使用vscode或者其他编辑器打开 (3)初始monitor监视器锁(先了解后细说) (4)建立宏观概念(初 ...
从源码的角度理解Glide的执行流程
转自:http://blog.csdn.net/guolin_blog/article/details/53939176 在本系列的上一篇文章中,我们学习了Glide的基本用法,体验了这个图片加载框架 ...
(01)ORB-SLAM2源码无死角解析-(01) 环境搭建,demo运行,ROS一键安装_清除各种疑难杂症
讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解的(01)ORB-SLAM2源码无死角解析-接如下(本文内容来自计算机视觉life ORB-SLAM2 课程课件): (0 ...

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

案例练习

2、程序员求签

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

最新文章

热门文章