网页设计（九）JavaScript基础应用
发布时间：2024年01月17日
一、网页中文字的字号选择性改变
单击前初始状态页面
单击“中”链接后页面
文字素材：
??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
欢迎大家点赞 👍 收藏 ? 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！
文章来源:https://blog.csdn.net/m0_73378536/article/details/135640388
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- Laya1.8.4接入FariyGui，以及其中踩的坑
- UML统一建模语言
- 使用 FastAPI 和 Vue.js 实现前后端分离
- 业务代码-整合框架-存储-缓存常见错误详解一
- Java常见面试题--后端——JavaSE前篇
- Allegro如何导入芯片的Pin Delay？
- HTML期末设计——人网页设计与实现——人物介绍丁真(学生个人网站作业设计)
- 基于大数据技术的用户日志数据分析及可视化平台搭建项目代码及数据集
- 奥威亚视屏云平台VideoCover任意文件上传
- Python-文案救赎