【JavaScript实训】调试程序--根据时间问好

一、题目要求：

二、实训要点：

三、实现思路和关键代码：

具体解释步骤：

四、完整代码与解释：

一、题目要求：

（1）、当输入当前时间值为6~12时，页面显示“上午好！欢迎来到一只傻猪猪的博客”，输入几点显示几个图标。如图1-1所示：

图1-1 输入时间值为9

（2）、当输入当前时间值为13~20时，页面显示“中午好！欢迎来到一只傻猪猪的博客”，输入几点显示几个图标。如图1-2所示：

图1-2 输入时间值为14

（3）、当输入其他时间值时，页面显示“夜深了，该休息啦！”，输入几点显示几个图标。如图1-3所示：

图1-3 输入时间值为5

二、实训要点：

→ 会使用if条件结构和for循环语句编写程序。

三、实现思路和关键代码：

（1）、确定if语句和条件设置是否正确；
（2）、运用for循环结构和语法补充关键部分。

具体解释步骤：

（1）、设置输入框：

prompt（）方法会弹出一个提示框，用于等候用户输入一行数据。

（2）、设置当输入当前时间值为6~12时，页面显示“上午好！欢迎来到一只傻猪猪的博客”，并且输入几点显示几个图标。

（3）、使用else if语句，设置其他2个，如图所示：

四、完整代码与解释：

此处代码的实现过程要注意图片的存放地址，要不然会不显示图片。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>调试程序--根据时间问好</title><script>var hour=prompt("请输入当前的小时数：","");  //设置输入提示框if(hour>6&&hour<13){     //设置条件，相对应的时间值document.write("<h2>上午好！欢迎来到一只傻猪猪的博客</h2>");  //输出文字内容for(var i=0;i<hour;i++){   //设置图片根据输入的时间值实现for循环输出document.write("<img src='images/z.jpg'>");   //输出图片数量}}else if(hour>12&&hour<21){document.write("<h2>下午好！欢迎来到一只傻猪猪的博客</h2>");for(var j=0;j<hour;j++){document.write("<img src='images/z2.jpg'>");}}else {document.write("<h2>夜深了，该休息啦！</h2>");for(var w=0;w<hour;w++){document.write("<img src='images/z1.jpg'>");}}</script>
</head>
<body>
</body>
</html>

【JavaScript实训】调试程序--根据时间问好相关推荐

【JavaScript实训】-- 限时秒杀
这道题是我在上js课程的时候,老师临时给我们出的一道题,虽然说这种小练习之前也要写过相关代码,但好像把它综合到一起,我就蒙圈了,哎~ 实现页面: 目录一.实现步骤详解: 1.设置秒杀结束时间 2.声 ...
[JavaScript实训] -- 制作简易的购物车页面
目录一.训练要点: 二.题目需求说明: 三.实现思路及关键代码: 四.完整代码实现: 一.训练要点: 1.使用close()方法关闭窗口: 2.使用confirm()方法进行信息确认: 3.使用al ...
明天就是第四周的实训开始的时间
认真做好没一件事情. 转载于:https://www.cnblogs.com/zzzzw/p/4771820.html
大二学生JavaScript实训大作业——动漫秦时明月7页期末网页制作 HTML+CSS+JavaScript 网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
大二学生JavaScript实训大作业——动漫秦时明月7页期末网页制作 html css javascript 网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
java script实训心得_javascript实训报告总结.docx
javascript实训报告总结 Javascript实训报告专业名称:计算机应用技术班级名称: 学员姓名: 指导教师:_______________ 完成日期: 一.简介: Web标准并不是一个 ...
大四软件工程实训总结 | TMS 物流管理系统 | 我们各自担任了产品经理、项目经理、IT总监、后端、前端和测试
文章目录一.实训介绍 1.1 实训目的 1.2 角色职责分配产品经理项目经理 IT 总监后端程序员前端程序员测试人员 1.3 实训过程二.实训记录 Day 1 需求文档 Day 2 项目 ...
选购个人计算机小结,计算机实训小结精选 .doc
计算机实训小结精选计算机实训小结计算机对我来说异常陌生,因为我很少接触它,对它了解也很少,每次实际操作对我来说都很困难,我都会很紧张很烦躁,对它一点兴趣都没有.但是鉴于计算机在以后工作中的重要性 ...
hadoop实训报告总结及体会_管理工程学院举办电子商务实训表彰大会
管理工程学院举办电子商务实训表彰大会管理工程学院举办电子商务实训表彰大会时间:2019-1-9 信息来源:管理工程学院 2019年1月9日下午三点,管理工程学院在8号楼创业大讲堂隆重 ...

【JavaScript实训】调试程序--根据时间问好

一、题目要求：

二、实训要点：

三、实现思路和关键代码：

具体解释步骤：

四、完整代码与解释：

【JavaScript实训】调试程序--根据时间问好相关推荐

最新文章

热门文章