实验14

1. 编写JavaScript程序实现“九九乘法口诀”表，如图14-40所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>九九乘法表</title>
</head>
<body><h1>九九乘法表</h1>
</body>
<script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(i + "*" + j + "=" + i * j + " ");}document.write('<br />')}
</script>
</html>

2. 编写JavaScript代码，找出符合条件的数。如图14-41所示。

（1）页面标题为：“找出符合条件的数”；

（2）页面内容为：3号标题标记显示“找出1000~9999之间能够被17和13同时整除的整数的个数及累加和”，要求输出区间累计有多少个符合条件的整数，并计算符合条件的整数的累加和，同时输出符合条件的整数，输出格式：每行10个整数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>找出符合条件的数</title>
</head>
<body><h3>找出1000~9999之间能够被17和13同时整除的整数个数及累加和</h3>
</body>
<script>let count = 0, sum = 0;document.write("区间中符合条件的数共有（输出格式：10个1行）<br />");for (let num = 1000; num <= 9999; num++) {if (num % 13 === 0 && num % 17 === 0) {document.write(num + " ");count++;sum += num;if (count % 10 === 0) document.write('<br />');}}document.write(`<br />区间中符合条件的数共有个${count}<br />个`);document.write(`区间中符合条件的数的累加和为${sum}`);
</script>
</html>

实验15

1. 编写JavaScript代码实现用户登录时数据合法性校验功能，界面如图15-16所示，具体要求如下：

（1）必填项验证——用户名文本输入框、密码输入框必须含有值。

（2）有效性验证——用户名、密码长度大于等于8个字符，小于等于20个字符。

（3）当提交数据时，如果输入框中的数据不合法，则给出对应的提示信息并将焦点聚焦到对应的输入框上。

提示：使用域和域标题进行窗口布局，背景颜色为#663399。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单处理</title><style>body {background: #663399;}legend {color: white;font-size: 24px;font-weight: bold;text-align: left;}fieldset {padding: 20px;text-align: center;}input {margin: 20px;}label {width: 50px;text-align: left;display: inline-block;}</style>
</head>
<body><form action="/" method="POST" onsubmit="return controller()"><fieldset><legend>用户登录</legend><br /><label for="username">用户名</label><input type="username" name="username" id="username" autocomplete="on" /><br /><label for="password">密码</label><input type="password" name="password" id="password" /><br /><input type="submit" value="提交"><input type="reset" value="重置"></fieldset></form>
</body>
<script>const form = document.querySelector('form');function requiredVerify(arr) {return arr.filter(item => item.value.length === 0);}function efficientVerify(arr) {return arr.filter(item => item.value.length < 8 || item.value.length > 20);}function controller() {const efficient = efficientVerify([form.username, form.password]),required = requiredVerify([form.username, form.password]);if (required.length) {const str = document.querySelector(`label[for=${required[0].id}]`).innerText;alert(str + '不能为空');required[0].focus();return false;}else if (efficient.length) {const str = document.querySelector(`label[for=${efficient[0].id}]`).innerText;alert(str + '必须在8-20位')efficient[0].focus();return false;}return true;}
</script>
</html>

2. 编写JavaScript程序实现单击列表框任一选项时，通过告警消息框显示教材名称及定价，如图15-17所示。

（1）页面标题为“显示列表项的内容”；

（2）页面内容：3号标题标记显示标题“显示列表项的内容”，插入一个大小为5的列表框，用于显示教材名称，教材定价保存在value中，分别如下：

计算机组成原理35元、数据结构38元、计算机网络43元、Java程序设计40元、算法分析28元。

（3）编写displayItem()函数，实现当用户选择某一列表项时通过告警框分行显示选中的教材名称和定价（列表项中的内容和value值）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示列表项的内容</title>
</head>
<body><h3>显示列表项的内容</h3><select size="5" onchange="disaplayItem()"><option value="35元">计算机组成原理<option value="38元">数据结构<option value="43元">计算机网络<option value="40元">Java程序设计<option value="28元">算法分析</select>
</body>
<script>function disaplayItem() {const select = document.querySelector('select'),selectedItem =  select[select.selectedIndex],msg = "教材名称："+selectedItem.innerText + "\n"+"定价："+selectedItem.value;alert(msg)}
</script>
</html>

实验16

1. 设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成三个1~9之间的随机数，当这三个随机数中有一个数字为8时，就算赢一次，如图16-20所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>随机幸运数字</title>
</head>
<body></body>
<script>function setThreeNumber() {const array = [];for (let i = 0; i < 3; i++) {array.push(Math.floor(Math.random() * 9) + 1);}return array;}function judge(array) {return array.some(elem => elem === 8);}let flag = true,count = 0,winCount = 0;while (flag) {const array = setThreeNumber(),result = array.join('');let winOrLose;if (judge(array)) {winCount++;count++;winOrLose = '赢';} else {count++;winOrLose = '输';}const message =result+"\n"+winOrLose+"\n"+"您累计玩了"+count+"次，赢了"+winCount+"次，胜率"+Math.floor(winCount / count * 100)+"%,继续吗？";if (confirm(message)) {flag = true;} else {flag = false;}}
</script>
</html>

2. 按如图16-21所示的布局，完成下列功能：

（1）单击“随机产生20个整数”按钮时，能够随机产生20个4为整数（1000~9999），并将产生的20个整数写入到数组，将其从小到大进行排序，输出在多行文本框中；

（2）单击“找出能被5整除的整数”的按钮时，从产生的20个整数中找出能够被5整除的整数，并在多行文本框中输出；

（3）单击“重置”按钮时，将多行文本框中的所有内容清空。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>随机产生20个4位整数并从小到大进行排序</title>
</head>
<body><textarea id="display" name="display" rows="10" cols="50"></textarea><br /><button onclick="setNumbers()">随机产生20个整数</button><button onclick="getNumbers()">找出能被5整除的整数</button><button onclick="reset()">重置</button>
</body>
<script>const numArr = [];function setNumbers() {numArr.length = 0;for (let i = 0; i < 20; i++) {numArr.push(Math.floor(Math.random()*9000 + 1000)); }display.value = "随机产生20个四位整数，分别如下：\n"+numArr.join(',');display.value += "\n从小到大排序的结果为：\n"+numArr.sort().join(',');}function getNumbers() {const filterNum = numArr.filter(num => num % 5 === 0);display.value += "\n能被5整除的数有：\n"+filterNum.join(',')}function reset() {display.value = "";numArr.length = 0;}
</script>
</html>

Web前端开发技术：实验14-16相关推荐

web前端开发技术实验与实践（第三版）储久良编著项目16 div+CSS页面布局设计
web前端开发技术实验与实践(第三版)储久良编著项目16 实训五项目16 一.页面文字素材: 这是头部信息区. 这是导航信息区. 这是主题信息区. 这是右侧信息区. 这是版权信息区. 二.代码: ...
html表单实验结论,web前端开发技术实验报告-实验五
1.长春大学 20 15 2016学年第二学期Web前端开发技术课程实验报告学院: 计算机科学技术专业: 软件工程班级: 软件14402 学号: 姓名: 王悦任课教师 ...
web前端开发技术实验与实践（第三版）储久良编著项目12 设计简易网站导航
web前端开发技术实验与实践(第三版)储久良编著项目12 设计简易网站导航实训三项目12 设计简易网站导航一.页面文字素材: 序号网站名称 URL 1 百度 http://www.ba ...
实训报告html前端开发,web前端开发技术实验报告实验三.doc
web前端开发技术实验报告实验三.doc (5页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 11.90 积分长春大学 20 15 - 20 ...
web前端开发技术实验与实践（第三版）储久良编著项目13 设计新生课程简介
web前端开发技术实验与实践(第三版)储久良编著项目13 设计新生课程简介实训三项目13 设计新生课程简介一.页面文字素材: 英语基础英语.高级英语.报刊选读.视听.口语.英语写作.翻译 ...
web前端开发技术实验与实践（第三版）储久良编著项目5 综合编程岗位介绍
实训一项目5 综合编程岗位介绍一.页面文字素材: WEB前端开发工程师的岗位职责:(1)协助系统架构设计师进行系统架构设计工作:(2)承担WEB前端核心模块的设计.实现工作:(3)承担主要开发工作 ...
Web前端开发技术实验与实践（第3版）储久良编著实训8
实训8 HTML5基础与CSS3应用项目22 当当网企业用户注册页面设计页面效果截图代码  <!DOCTYPE html> < ...
Web前端开发技术实验与实践（第3版）储久良编著实训2
项目6 文本与段落标记应用页面效果截图代码  <!DOCTYPE html> <html><head><me ...
web前端开发技术实验与实践（第三版）储久良编著项目8 设计制度宣传展板
实训二项目8 设计制度宣传展板一.页面文字素材: 大型仪器必须有专人保管,须配有稳压电源,使用前须先检查仪器间各电路连接情况,再开稳压电源,然后再启动仪器开关. 必须严格执行仪器设备运行记录制度, ...
Web前端开发技术实验与实践（第3版）储久良编著实训6
实训6 表格与表格页面布局项目18 设计网络主题研讨会日程表页面效果截图代码  <!DOCTYPE html> <html&g ...

Web前端开发技术：实验14-16

实验14

实验15

实验16

Web前端开发技术：实验14-16相关推荐

最新文章

热门文章