网页设计（九）JavaScript基础应用

在这里插入图片描述

一、网页中文字的字号选择性改变

单击前初始状态页面
在这里插入图片描述
单击“中”链接后页面

文字素材：
JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。

<!-- prj_9_1.html  -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title> 改变新闻网页中字号 </title><style type="text/css">#div1 {text-align: center;font-size: 16px;}/*定义图层样式*/#content {font-size: 12px;line-height: 2em;padding: 10px;background: #C0C0C0;color: black;border: 2px groove #FCFF57;}p {text-indent: 2em;}/*定义段落样式*/</style><script type="text/javascript">//定义设置字体大小函数function $(id) {return document.getElementById(id);}function setFont(size) {$("content").style.fontSize = size;}</script></head><body><h2 align="center">用JavaScript改变新闻网页中字号</h2><div id="div1">选择字号【 &nbsp;<a href="javascript:setFont('12px')">小</a>&nbsp;<a href="#" onclick="javascript:setFont('18px');">中</a>&nbsp;<a href="#" onclick="setFont('24px');">大</a>】</div><div id="content"><p>JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。</p></div></body>
</htmL>

二、计算任意区间内连续自然数的累加和

计算累加和页面效果图
在这里插入图片描述
未应用样式时页面效果

选择文件类型对话框界面

未输入区间数据页面效果图

起始数大于等于终止数时页面效果图

javascript代码

/*计算任意区间内连续自然数的累加和sum.js*/
//以Id号获取HTML页面元素
function $(id){return document.getElementById(id);}
//计算区间自然数累加和
function sum(n1,n2){for (var i=n1,sum1=0;i<=n2 ;i++ ){sum1=sum1+i;}return sum1;
}
//显示累加和
function show(){var n11=parseFloat($("start_num").value);var n22=parseFloat($("end_num").value);if (n11>0 && n22>0)   //输入数据必须不为0{ if ( n11>=n22){alert("起始数必须小天终止数，请重输！");$("start_num").value="";   //清空文本域$("end_num").value="";    //清空文本域}else{  //回填累加和文本框$("sum").value=sum(n11,n22);}}else{alert("请输入数据！");$("start_num").focus();  //文本域获得焦点}
}

<!-- prj_9_2.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title> 计算任意区间内连续自然数的累加和</title><script type="text/javascript" src="pro92/sum.js"></script><style type="text/css">div {text-align: center;margin: 20px auto;border: 18px groove #66ff66;line-height: 1.5em;width: 560px;height: 260px;font-weight: bold;}form {margin: 0 auto;padding: 5px;}input,label {margin: 5px auto;}</style></head><body><div id="" class=""><h3>计算任意区间内连续自然数的累加和</h3><form method="post" action=""><h3>定义区间</h3><label>起始数:</label><input type="text" name="start_num" id="start_num"><label>终止数:</label><input type="text" name="end_num" id="end_num"><br><label>累加和:</label><input type="text" name="sum" id="sum" readonly><br><br><input type="button" value="计算" onclick="show();" />&nbsp;&nbsp;<input type="reset" name="reset" value="清空" /></form></div></body>
</html>

三、国债认购小程序

程序运行初始页面
在这里插入图片描述
输入表单数据后页面

确认信息框页面

提示信息对话框-输入验证码页面

告警信息框输出认购信息页面

告警信息对话框-交易失败页面

文字素材：
购买国债就是认购国家借的债，即国家债券。它是国家为筹措资金而向投资者出具的书面借款凭证，承诺在一定的时期内按约定的条件，按期支付利息和到期归还本金。

<!-- prj_9_3.html -->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>国债认购</title><style type="text/css">fieldset {margin: 0 auto;width: 650px;height: 260px;padding: 30px;}legend,input,label {font-size: 18px;margin: 5px 2px;}p {text-indent: 2em;font-size: 20px;font-weight: bold;}blockquote {text-align: center;}</style><script type="text/javascript">// 通过ID获取页面元素function $(id) {return document.getElementById(id);}// 通过name获取页面一组元素function $name(name) {return document.getElementsByName(name);}// 获取一组单选按钮中选中的单选按钮的valuefunction getRadioValue() {var gzs = $name('gz');for (var i = 0; i < gzs.length; i++) {if (gzs[i].checked == true) {return gzs[i].value;}}}// 产生6位随机交易码function createCode() {// 第1位验证码数字不能为0,后5位可以是[1,9]之间的数字// 定义两个数字集合var codeset1 = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9');var codeset2 = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');// 产生第1位验证码数字var code1 = codeset1[Math.floor(Math.random() * codeset1.length)];// 循环产生后5位验证码数字for (var i = 0; i <= 4; i++) {code2 = codeset2[Math.floor(Math.random() * codeset2.length)]code1 = code1 + code2}return code1;}// 确认后，输入验证码，正确提示交易信息，错误提示出错信息。function check() {var yn = confirm("确认吗？");if (yn == true) {var ccode = createCode()var pass = prompt("请输入交易验证码" + ccode, "")if (pass == null) {alert('退出交易！！');return;} else {if (pass == ccode) {var msg = "认购金额：" + $("number").value;alert(msg + "\n" + "国债期限利率：" + getRadioValue() + "\n交易成功！");} else {alert("交易验证码错误，退出！");}}} else {alert("退出交易！");}}</script></head><body><form action=""><fieldset id=""><legend align="center">国债认购</legend><p>购买国债就是认购国家借的债，即国家债券。它是国家为筹措资金而向投资者出具的书面借款凭证，承诺在一定的时期内按约定的条件，按期支付利息和到期归还本金。</p><label>国债期限：</label><input type="radio" name="gz" id="" value="一年，3.0%" checked />一年，3.0%<input type="radio" name="gz" id="" value="二年，3.35%" />二年，3.35%<input type="radio" name="gz" id="" value="三年，3.75%" />三年，3.75%<input type="radio" name="gz" id="" value="五年，4.20%" />五年，4.20%<br><label>认购金额：</label><input type="number" name="" id="number" step="5000" min="10000" value="10000" /><blockquote><input type="button" name="" id="" value="提交" onclick="check()" /><input type="reset" value="重置"></blockquote></fieldset></form></body>
</html>

四、课外拓展训练

1.求200以内的素数

求200以内的素数
在这里插入图片描述

<!-- project_9_1.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>求200以内的素数</title></head><body><h3>200以内的素数有：</h3><script type="text/javascript">//var prime = true;var primeSum = 0;for (var i = 2; i <= 200; i++) {var prime = true;for (var j = 2; j < i; j++) {if (i % j == 0) {prime = false;break;}}if (prime) {primeSum++;document.write(i + "  ");}}document.write("<br>素数有:" + primeSum);</script></body>
</html>

2.简易密码验证

输入密码长度少于8个字符时验证界面
在这里插入图片描述
输入密码长度大于8个但不包含字母时验证界面

输入密码长度大于8个且包含字母时验证界面

<!-- project_9_2.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>简易密码验证</title><script type="text/javascript">function checkKey() {/* 密码验证要求：密码长度大于等于8，必须含有字母；*/var keystr = document.myform.key.value; //获取密码 var count = 0; //密码中含有字母的个数// 判断密码的长度if (keystr.length < 8) {alert("密码长度必须大于等于8,请重输！");document.myform.key.value = "";} else {//判断密码中是否含有字母Aa-Zzfor (var i = 0; i <= keystr.length - 1; i++) {var onechar = keystr.charAt(i).toUpperCase() //每次循环取一位字符if (onechar >= "A" && onechar <= "Z") {count++;} //是字母,则计数器加1							}if (count < 1) {alert("密码中必须包含一个以上字母,请重输！");document.myform.key.value = "";} else {alert("密码设置规范！");}}}</script></head><body><h3>简易密码验证</h3><form name="myform"><label>用户名：</label><input type="text" name="username" value="张试验" readonly><br><label>密码：</label><input type="password" name="key"><br><input type="button" value="验证" onclick="checkKey();"><input type="reset"></form></body>
</html>