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

news2024/9/21 20:40:38

在这里插入图片描述

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

单击前初始状态页面
在这里插入图片描述
单击“中”链接后页面
在这里插入图片描述
文字素材：
  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);
			}
			// 获取一组单选按钮中选中的单选按钮的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
在这里插入图片描述

在这里插入图片描述

欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1398509.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux系统安装NFS服务器

Linux系统安装NFS服务器

NFS是一种网络文件系统&#xff0c;英文全称Network File System&#xff0c;通过NFS可以让不同的主机系统之间共享文件或目录。通过NFS&#xff0c;用户可以直接在本地NFS客户端读写NFS服务端上的文件&#xff0c;是非常好的共享存储工具。本篇文章将介绍如何在CentOS7上安装N…
阅读更多...
使用Python在本地生成助记词

使用Python在本地生成助记词

新建并打开一个空文件夹 逐行 执行命令 python3 -m pip install --upgrade pippip3 install eth_accountpip3 install web3touch acco.py然后看到文件夹下面会有个acco.py文件 将把下面的代码粘贴到acco.py中保存。 import os from eth_account import Accountif __name__ …
阅读更多...
全网最详细！！Python 爬虫快速入门

全网最详细！！Python 爬虫快速入门

1. 背景 最近在工作中有需要使用到爬虫的地方&#xff0c;需要根据 Gitlab Python 实现一套定时爬取数据的工具&#xff0c;所以借此机会&#xff0c;针对 Python 爬虫方面的知识进行了学习&#xff0c;也算 Python 爬虫入门了。 需要了解的知识点&#xff1a; Python 基础语…
阅读更多...
Windows给docker设置阿里源

Windows给docker设置阿里源

windows环境搭建专栏&#x1f517;点击跳转 Windows系统的docker设置阿里源 文章目录 Windows系统的docker设置阿里源1.获得镜像加速器2.配置docker 由于我们生活在中国大陆&#xff0c;所以外网的访问总是那么慢又困难&#xff0c;用docker拉取几兆的小镜象还能忍受&#xff…
阅读更多...
idea中使用git提交代码报 Nothing To commit No changes detected

idea中使用git提交代码报 Nothing To commit No changes detected

问题描述 在idea中右键&#xff0c;开始将变更的代码进行提交的时候&#xff0c;【Commit Directory】点击提交的时候 报 Nothing To commit No changes detected解决方案 在这里点击Test 看看是不是能下面显示git版本&#xff0c;不行的话 会显示一个 fix的字样&#xff0c;行…
阅读更多...
【2023我的编程之旅】七次不同的计算机二级考试经历分享

【2023我的编程之旅】七次不同的计算机二级考试经历分享

目录 我报考过的科目 第一次报考MS Office 第二次报考Web语言&#xff0c;C语言&#xff0c;C语言 第三次报考C语言&#xff0c;C语言&#xff0c;Java语言 分享一些备考二级的方法 一些需要注意的细节 结语 2023年的CSDN征文活动已经进入了尾声&#xff0c;在这最后我…
阅读更多...
YOLOv8改进 | 进阶实战篇 | 利用YOLOv8进行视频划定区域目标统计计数

YOLOv8改进 | 进阶实战篇 | 利用YOLOv8进行视频划定区域目标统计计数

一、本文介绍 Hello，各位读者，最近会给大家发一些进阶实战的讲解，如何利用YOLOv8现有的一些功能进行一些实战， 让我们不仅会改进YOLOv8，也能够利用YOLOv8去做一些简单的小工作，后面我也会将这些功能利用PyQt或者是pyside2做一些小的界面给大家使用。 在开始之前给大家推…
阅读更多...
二、VS2019编译的VTK9.0.0 + Qt 5.14.2 环境测试

二、VS2019编译的VTK9.0.0 + Qt 5.14.2 环境测试

1. 使用CMake VS2019 编译vtk 9.0.0 时，需要启用支持Qt开关、如下图 如果不会编译的可以参见我的这篇文章： 一、VTK 9.0.0 编译安装步骤 VS2019 CMake3.26.0-CSDN博客 打开Qt5.14.2 ，创建Qt Widget 项目： 构建设置选择 MSVC2017 64bit pro 项目文件加入两行配置: …
阅读更多...
链表存数相加算法(leetcode第2题)

链表存数相加算法(leetcode第2题)

题目描述&#xff1a; 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外&#xff0c;这…
阅读更多...
zabbix监控php-fpm 服务的状态

zabbix监控php-fpm 服务的状态

目录 内容纯手敲&#xff0c;有错误请私信博主 一、zabbix-agent端配置 1.下载php-fpm 2.打开php-fpm的状态页面 3.启动php-fpm 4.安装nginx 5.设置nginx &#xff0c;设置代理php&#xff0c;和php-fpm的状态页面匹配 6重启nginx 7.查询php-fpm的状态页面 8. 根据用户…
阅读更多...
Redis--HyperLogLog的指令语法与使用场景举例(UV统计)

Redis--HyperLogLog的指令语法与使用场景举例(UV统计)

文章目录 前言HyperLogLog介绍HyperLogLog指令使用使用场景&#xff1a;UV统计 前言 Redis除了常见的五种数据类型之外&#xff0c;其实还有一些少见的数据结构&#xff0c;如Geo&#xff0c;HyperLogLog等。虽然它们少见&#xff0c;但是作用却不容小觑。本文将介绍HyperLogL…
阅读更多...
LeetCode 热题 100 | 双指针（下）

LeetCode 热题 100 | 双指针（下）

目录 42. 接雨水 1 方法一&#xff1a;我的方法 2 方法二&#xff1a;动态规划 3 方法三&#xff1a;双指针 菜鸟做题第一周&#xff0c;语言是 C 42. 接雨水 1 方法一&#xff1a;我的方法 Warning&#xff1a;这是我的智障做法&#xff0c;请勿模仿 我只能说它教会…
阅读更多...
CVE2020-1938漏洞复现

CVE2020-1938漏洞复现

这个漏洞是tomcat的 然后我们先了解漏洞产生的原理 首先我们先来看tmocat纠结是干什么的 tomcat是个中间件 最主要的两个结构、 servlet的定义和部分源码&#xff0c; 漏洞就是从这来的 tomcat处理http请求 源码分析 tomcat 8.5.46 哎 这教学视频讲半天看不懂 不看原…
阅读更多...
汽车制动器行业调查：市场将继续呈现稳中向好发展态势

汽车制动器行业调查：市场将继续呈现稳中向好发展态势

汽车制动器是汽车的制动装置&#xff0c;汽车所用的制动器几乎都是摩擦式的&#xff0c;可分为鼓式和盘式两大类。鼓式制动器摩擦副中的旋转元件为制动鼓&#xff0c;其工作表面为圆柱面;盘式制动器的旋转元件则为旋转的制动盘&#xff0c;以端面为工作表面。 目前市场上主流的…
阅读更多...
防火墙部署安全区域

防火墙部署安全区域

目录 为什么需要安全区域在防火墙上如何来区分不同的网络将接口划分到安全区域安全区域、受信任程度与安全级别安全域间、安全策略与报文流动的方向 安全区域配置案例 为什么需要安全区域 防火墙主要部署在网络边界起到隔离的作用 在防火墙上如何来区分不同的网络 防火墙通过安…
阅读更多...
基础算法-整数二分

基础算法-整数二分

基础算法-整数二分 基本思想——折半 二分法的基本思想比较简单&#xff0c;是用来在数组当中查找特定元素的算法。 二分可以分为整数二分和浮点二分&#xff0c;本文主要介绍整数二分。 具体步骤 首先&#xff0c;从数组的中间元素开始搜索&#xff0c;如果该元素恰好是目标…
阅读更多...
【蓝桥杯EDA设计与开发】资料汇总以及立创EDA及PCB相关技术资料汇总（持续更新）

【蓝桥杯EDA设计与开发】资料汇总以及立创EDA及PCB相关技术资料汇总（持续更新）

[18/01/2024]&#xff1a;目前为了准备蓝桥杯做一些资料贴&#xff0c;于是写下这一篇博客。 各种资料均来源于网络以及部分书籍、手册等文档&#xff0c;参考不保证其准确性。 如果在准备蓝桥杯&#xff0c;可与我私信共同学习&#xff01;&#xff01;&#xff01;&#xf…
阅读更多...
无尽的石头

无尽的石头

题目 import java.util.Scanner;public class Main {public static int func(int res) {int sum 0;while(res!0) {int s res%10;sums;res/10;}return sum;}public static void main(String[] args) {Scanner sc new Scanner(System.in);int t sc.nextInt();sc.nextLine();…
阅读更多...
浅谈重组IgG抗体表达-泰克生物

浅谈重组IgG抗体表达-泰克生物

一&#xff0e;IgG抗体简介 IgG作为机体的免疫卫士&#xff0c;主要在机体免疫中起保护作用&#xff0c;对抗大部分的细菌和病毒。IgG是唯一能通过胎盘的免疫球蛋白&#xff0c;IgG能够激活补体系统&#xff0c;参与抗体介导的细胞毒性即ADCC作用&#xff0c;同时参与部分超敏反…
阅读更多...
如何免费从 SD 卡恢复已删除的文件？（照片、视频、MP3）

如何免费从 SD 卡恢复已删除的文件？（照片、视频、MP3）

今天我们将告诉您如何免费从格式化的 SD 卡或闪存卡恢复文件。 特别是如果您是一名摄影师、博主或任何处理内容的人&#xff0c;您的 SD 卡上有一些内容&#xff0c;但您不小心删除或格式化了&#xff0c;现在您要向自己道歉。 无需担心&#xff0c;因为今天我们将告诉您如何…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023