一、网页中文字的字号选择性改变
单击前初始状态页面
单击“中”链接后页面
文字素材：
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">选择字号【 <a href="javascript:setFont('12px')">小</a>
<a href="#" onclick="javascript:setFont('18px');">中</a>
<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();" />
<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);
}
// 获取一组单选按钮中选中的单选按钮的value
function 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-Zz
for (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>
作者主页： 正函数的个人主页
文章收录专栏： Web design
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！
2229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
