JS实现九九乘法表和时间问候语
编码
小练习,练习使用循环实现一个九九乘法表
- 第一步,最低要求:在Console中按行输出 n * m = t
- 然后,尝试在网页中,使用table来实现一个九九乘法表
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>九九乘法表table版</title>
</head> <body onload="a()">
<table id="table" border="1" > </table>
<script>
function a() {
var t = document.getElementById("table");
for (n = 9; n > 0; n--) {
var tr = document.createElement("tr");
for (m = 1; m < n+1; m++) {
var td = document.createElement("td");
var node = document.createTextNode(m + "*" + n + "=" + m * n);
td.appendChild(node);
tr.appendChild(td);
t.appendChild(tr);
}
}
}
</script>
</body> </html>
注意点:九九乘法表按照常规自增写法会涉及重复部分重复公式,如1*2=2;2*1=2;所以我们采用m<n+1的写法来递减个数。
注意变量的重复定义,避免出现错误,一开始写m*n=t,后来报错,原来和table的变量冲突了,无法使用t.appendChild(tr)这个函数。
编码
最后一个练习,在你的代码中,实现一个,当用户访问页面的时候,根据当前时间,在页面中输出不同的问候语。
比如早上的时候,输出早上好,晚上的时候是晚上好。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>九九乘法表table版</title>
</head> <body onload="a()">
<table id="table" border="1"> </table>
<!-- 通过按钮实现问候 -->
<!-- <button id="saytime" onclick="sayhello(date)">点击查看时间问候</button> -->
<script>
var date = new Date(); function sayhello() {
var hour = date.getHours();
var minutes = date.getMinutes();
var mytime = hour * 3600 + minutes * 60;
if (mytime >= 6 * 3600 && mytime < (11 * 3600 + 30 * 60)) {
alert("上午好,亲爱的Joe!");
} else if (mytime >= (11 * 3600 + 30 * 60) && mytime < (14 * 3600 + 30 * 60)) {
alert("中午好,亲爱的Joe!");
} else if (mytime >= (14 * 3600 + 30 * 60) && mytime < (18 * 3600)) {
alert("下午好,亲爱的Joe!");
} else {
alert("晚上好,亲爱的Joe!");
}
}
//网页打开就问候
sayhello(date); function a() {
var t = document.getElementById("table");
for (n = 9; n > 0; n--) {
var tr = document.createElement("tr");
for (m = 1; m < n + 1; m++) {
var td = document.createElement("td");
var node = document.createTextNode(m + "*" + n + "=" + m * n);
td.appendChild(node);
tr.appendChild(td);
t.appendChild(tr);
}
}
}
</script>
</body> </html>
注意:判断时间记得考虑边界值
JS实现九九乘法表和时间问候语的更多相关文章
- 用JS写九九乘法表
本来JS部分觉得就不是很好,结果经过一个寒假,在家的日子过的太舒适,基本把学的都快忘干净了,今天老师一说九九乘法表,除了脑子里浮现出要满足的条件,其他的都不记得了,赶快整理了一下: <scrip ...
- js实现九九乘法表
<script type="text/javascript"> var sum=0; var wite; for (var i = 1; i < 10; i++) ...
- 用JS实现九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 记得初学JS时候练个九九乘法表都写的要死要活
还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...
- js九九乘法表的应用
<html> <head> <meta charset=utf-8" /> <title>js九九乘法表</title> < ...
- JS实现上下左右对称的九九乘法表
JS实现上下左右对称的九九乘法表 css样式 <style> table{ table-layout:fixed; border-collapse:collapse; } td{ padd ...
- 用js实现打印九九乘法表
用js在打印九九乘法表 思考 在学习了流程控制和条件判断后,我们可以利用js打印各式各样的九九乘法表 不管是打印什么样三角形九九乘法表,我们都应该找到有规律的地方,比如第一列的数字是什么规律,第一行的 ...
- 利用js的for循环实现一个简单的“九九乘法表”
For循环九九乘法表 for循环是javascript中一种常用的循环语句,可以很好的解决在程序中需要重复执行某些语句,利用for循环实现简单的“九九乘法表”的效果: 让循环从小到大,依次排序,并计算 ...
- 用JS的for循环打印九九乘法表
需要使用两个for循环嵌套,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- python 强大的工具
numpy Python科学计算的基础包 安装工具 pip3 install numpy pandas包含了高级的数据结构和操作工具,它们使得Python数据分析更加快速和容易. 安装工具 pip3 ...
- linux 内核知识参考
内存映像 kcore:http://blog.csdn.net/dog250/article/details/5303663 elf文件 :http://www.cnblogs.com/xmphoen ...
- Web项目通过Maven部署到Tomcat的错误。
一直提示: Maven Build的时候,一直提示一个关键错误 Cannot invoke Tomcat manager: Error writing to server 找了网上提示说应该先启动To ...
- django中多个app放入同一文件apps
新建一个apps文件夹 需要整理的app文件夹拖到同一个文件夹中,即apps.(弹出对话框,取消勾选Search for references) 在pycharm中,右键apps文件夹--选择mark ...
- Comparable比较器和Comparator比较器
1.Comparable比较器 在Arrays类中存在sort()排序方法,此方法可以直接对对象数组进行排序. public static void sort(Object[] a 根据元素的自然顺序 ...
- 日语N5学习
副词与连接词 ~から: 从-(表示时间.场所起点) ~まで: 到-(表示时间.场所终点) と: 和(并列时用) えーと: 嗯 いっしょに: 一起 ちょっと: 一点儿 いつも: 经常.总是 ときどき: ...
- String字符串补位
String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的读者应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重载形式. l ...
- Docker 镜像加速
通过 Docker 官方镜像加速,中国区用户能够快速访问最流行的 Docker 镜像.该镜像托管于中国大陆,本地用户现在将会享受到更快的下载速度和更强的稳定性,从而能够更敏捷地开发和交付 Docker ...
- Centos6.5上安装sonarqube6.7.6
Centos6.5已经装备好,可以联网 sonarqube6.7.6下载地址:https://www.sonarqube.org/downloads/ 步骤: 安装MySQL5.7 MySQL详细的安 ...
- 2019.03.29 读书笔记 关于params与可选参数
void Method1(string str, object a){} void Method2(string str, object a,object b) { } void Method3(st ...