JavaScript 应用

目录

1、编程实现“计算任意区间内连续自然数的累加和”页面。

 代码实现

2、应用 appendChild()方法和 getElementById()方法实现年月日的联动功能。

 代码

1、编程实现“计算任意区间内连续自然数的累加和”页面。

（1）文档结构的创建

启动程序，创建 HTML 文档。在新建文档中首行插入注释语句，注明程序名

称为 prj_5_1.html。注释如下： <!-- prj_5_1.html --> 保存文件。

（2）页面内容设计

在 body 标记中插入 1 个 div、1 个 form 标记、2 个 h3 和若干表单控件。

在 body 中插入 1 个 div。

在 div 标记中插入 h3 标记，h3 标记的内容为“计算任意区间内连续自然数的累加和”。

在 div 标记中插入 form 标记。 在 form 标记中插入 h3 标记，h3 标记的内容为“定义区间”。然后插入 3 个label 双标记，其内容分别是“起始数：”、“终止数：”、“累加和：”。在每个 label 标记后分别插入 1 个单行文本输入框，它们的 id 属性值分别为 start_num、end_num、sum，name 属性值与 id 值相同，累加和文本框设置只读属性。

在 form 标记中插入 1 个普通按钮，设置 value 值为“计算”，定义 onclick 属性值为“show();”。最后插入 1 个重置按钮，设置 value 值为“清空”。

保存网页。

（3）表现设计

在 style 标记中定义图层 div 和 form 标记的样式，具体样式定义要求如下：

div 标记样式为文本居中对齐，边界上下 20px、左右自动，行高 1.5em，边框线粗细 18px、线型 groove、线颜色#66FF66，宽度 560px，高度 260px，字体标粗。 定义 form 标记样式。form 标记样式为边界上下 20px、左右自动，填充 5px。 完成样式定义后，查看页面效果。

（4）定义 JavaScript 文件 sum.js

在 head 标记中插入 script 标记，代码如下：

<script type="text/javascript" src="sum.js"></script>

编写 sum.js。 编写通过 id 号获取页面元素的通用函数$(id)，如下：

function $(id){return document.getElementById(id);}

编写计算累加和的函数 sum(n1,n2)，其中 n1 是起始数，n2 是终止数。

function sum(n1,n2){

 for (var i=n1,sum1=0;i<=n2 ;i++ )

 { sum1=sum1+i; }//执行累加

 return sum1;//返回计算结果

}

编写回填显示累加和的函数 show（）。

该函数要求：

从起始数和终止数文本框中取出数据，两数均需要大于 0，否则要求重新输入，

起始数文本框获得焦点。 同时需满足起始数必须小于终止数，否则清空两个文本框，通过告警消息框提示错误信息，起始数文本框获得焦点。

若输入数据正确，则调用 sum（n1，n2）函数完成计算，并回填到累加和文本

框中，代码参考如下：

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=""; //清空输入域

 $("start_num").focus(); //输入域获得焦点 }

 else{ //回填累加和文本框

 $("sum").value=sum(n11,n22); }

 }else

 { alert("请输入数据！");

 $("start_num").focus(); //输入域获得焦点

 }}

图 5-1 设计网页效果图

 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				text-align: center;
				margin: 20px auto;
				line-height: 1.5em;
				border: 18px groove #66FF66;
				width: 560px;
				height: 260px;
				font-weight: bold;
			}

			form {
				margin: 20px auto;
				padding: 5px;
			}
		</style>
		<script type="text/javascript" src="sum.js"></script>
	</head>
	<body>
		<div>
			<h3>计算任意区间内连续自然数的累加和</h3>
			<form method="" action="">
				<h3>定义区间</h3>
				<label>起始数</label>
				<input type="text" id="start_num" />
				<label>终止数</label>
				<input type="text" id="end_num" />
				<label>累加和</label>
				<input type="text" id="sum" readonly="readonly" />
				<input type="button" value="计算" onclick="show()" />
				<input type="reset" value="重置" />
			</form>
		</div>
	</body>
</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) {
		if (n11 >= n22) {
			alert("起始数必须小于终止数，请重输！");
			$("start_num").value = "";
			$("end_num").value = "";
			$("start_num").focus();
		} else {
			$("sum").value = sum(n11, n22);
		}
	} else {
		alert("请输入数据！");
		$("start_num").focus();
	}
}

2、应用 appendChild()方法和 getElementById()方法实现年月日的联动功能。

当改变“年”菜单和“月”菜单的值时，“日”菜单的值的范围也会相应地改变。

（1）文档结构的创建

启动程序，创建 HTML 文档。在新建文档中首行插入注释语句，注明程序名

称为 prj_5_2.html。注释如下： <!-- prj_5_2.html --> 保存文件。

（2）页面内容设计及代码编写

在页面中创建表单，在表单中定义年、月、日 3 个下拉菜单，代码如下。

<form id="form1" name="form1" method="post" action="">

 <select name="year" id="year" οnchange="getday()">

 <script type=" text/javascript ">

 var mydate=new Date();

 for(i=1990;i<=mydate.getFullYear();i++){

 document.write("<option value='"+i+"' "+(i==1990?"selected":"")+">"

+i+"年</option>"); }

 </script>

 </select>

 <select name="month" id="month" οnchange="getday()">

 <script type=" text/javascript ">

 for(i=1;i<=12;i++){

 document.write("<option value='"+i+"'"+(i==1?"selected":"")+">"

+i+"月</option>"); }

 </script> 

 </select>

 <select name="day" id="day">

 <script type=" text/javascript ">

 for(i=1;i<=31;i++){

 document.write("<option value='"+i+"'"+(i==1?"selected":"")+">"+i+"

日</option>"); }

 </script>

 </select>

</form>

创建自定义函数 append（）和自定义函数 getday（）。创建自定义函数 append（），先在函数中应用 createElement（）函数创建下拉菜单项，并将下拉菜单项添加到相应的下拉菜单中。 创建自定义函数 getday（），在函数中根据获取的年、月的值来调用函数 append（），实现年、月、日的联动功能，代码参考如下。

<script type=" text/javascript ">

 function append(d,v){

 var option=document.createElement("option");//创建元素 option

 option.value=v;//把参数 v 作为元素的值

 option.innerText=v+"日";//把参数 v 作为元素的显示内容

 d.appendChild(option);//把元素 option 作为参数 d 的子节点 }

 function getday(){

 var y=form1.year.value;//取得年份的值

 var m=form1.month.value;//取得月份的值

 var d=document.getElementById("day");//定位到 id=day 的节点

 d.innerHTML="";//把 id=day 节点的内容清空

 if(m==4 || m==6 || m==9 || m==11){//如果月份的值是 4 或 6 或 9 或 11

 for(j=1;j<=30;j++){

 append(d,j);//把 1 到 30 循环加到天数当中 }

 }else if(m==2){//如果月份的值是 2

 if(y%4==0 && y%100!=0 ||y%400==0 ){//如果年份是闰年

 for(j=1;j<=29;j++){

 append(d,j);//把 1 到 29 循环加到天数当中

 }

 }else{

 for(j=1;j<=28;j++){

 append(d,j);//不是闰年就把 1 到 28 循环加到天数当中

 }

 }

 }else{//否则如果月份的值是 1 或 3 或 5 或 7 或 8 或 10 或 12

 for(j=1;j<=31;j++){

 append(d,j);//把 1 到 31 循环加到天数当中

 }

 }

 }

</script>

页面效果如下图所示。

 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

	</head>
	<body>
		<script language="JavaScript">
			function append(d, v) {
				var option = document.createElement("option");
				option.value = v;
				option.innerText = v + "日";
				d.appendChild(option);
			}

			function getday() {
				var y = form1.year.value;
				var m = form1.month.value;
				var d = document.getElementById("day");
				d.innerHTML = "";
				if (m == 4 || m == 6 || m == 9 || m == 11) {
					for (j = 1; j <= 30; j++) {
						append(d, j);
					}
				} else if (m == 2) {
					if (y % 4 == 0 || y % 400 == 0 && y % 100 != 0) {
						for (j = 1; j <= 29; j++) {
							append(d, j);
						}
					} else {
						for (j = 1; j <= 28; j++) {
							append(d, j);
						}
					}
				} else {
					for (j = 1; j <= 31; j++) {
						append(d, j);
					}
				}

			}
		</script>
		<form id="form1" name="form1" method="post" action="">
			<select name="year" id="year" onchange="getday()">
				<script language="JavaScript">
					var mydate = new Date();
					for (i = 1990; i <= mydate.getFullYear(); i++) {
						// document.write("<option value='''+i+'" "+(i==1990?"selected":"")+">"
						// +i+"年</option>"); 
						document.write("<option value='" + i + "' " + (i == 1999 ? "selected" : "") +
							">" + i + "年</option>");
					}
				</script>
			</select>

			<select name="month" id="month" onchange="getday()">
				<script language="JavaScript">
					for (i = 1; i <= 12; i++) {
						// document.write("<option value='''+i+'" "+(i==1?"selected":"")+">"
						// +i+"月</option>"); 
						document.write("<option value='" + i + "' " + (i == 1 ? "selected" : "") +
							">" + i + "月</option>");
					}
				</script>
			</select>

			<select name="day" id="day">
				<script language="JavaScript">
					for (i = 1; i <= 31; i++) {
						// document.write("<option value='''+i+'" "+(i==1?"selected":"")+">"
						// +i+"月</option>"); 
						document.write("<option value='" + i + "' " + (i == 1 ? "selected" : "") +
							">" + i + "日</option>");
					}
				</script>
			</select>
		</form>
	</body>
</html>

如果你喜欢这篇文章的话，请给作者点赞哟，你的支持是我不断前进的动力。

因为作者能力水平有限，欢迎各位大佬指导。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

若依框架---权限管理设计

若依框架---权限管理设计

前言 若依权限管理包含两个部分&#xff1a;菜单权限 和 数据权限。菜单权限控制着我们可以执行哪些操作。数据权限控制着我们可以看到哪些数据。 菜单是一个概括性名称&#xff0c;可以细分为目录、菜单和按钮&#xff0c;以若依自身为例&#xff1a; 目录&#xff0c;就是页…
阅读更多...
acm省赛：高桥和低桥（三种做法：区间计数、树状数组、线段树）

acm省赛：高桥和低桥（三种做法：区间计数、树状数组、线段树）

题目描述 有个脑筋急转弯是这样的&#xff1a;有距离很近的一高一低两座桥&#xff0c;两次洪水之后高桥被淹了两次&#xff0c;低桥却只被淹了一次&#xff0c;为什么&#xff1f;答案是&#xff1a;因为低桥太低了&#xff0c;第一次洪水退去之后水位依然在低桥之上&#xff…
阅读更多...
Linux内核IO基础知识与概念

Linux内核IO基础知识与概念

什么是 IO在计算机操作系统中&#xff0c;所谓的I/O就是 输入&#xff08;Input&#xff09;和输出&#xff08;Output&#xff09;&#xff0c;也可以理解为读&#xff08;Read&#xff09;和写&#xff08;Write)&#xff0c;针对不同的对象&#xff0c;I/O模式可以划分为磁盘…
阅读更多...
＜Linux＞进程控制

＜Linux＞进程控制

进程控制 文章目录进程控制一、进程创建1.fork函数认识2.写时拷贝3.fork常规用法4.fork调用失败的原因二、进程终止1.进程退出场景2.进程退出码3.进程退出的方式三、进程等待1.进程等待是什么&#xff1f;2.进程等待的必要性3.进程等待的方法3.1.wait函数3.2.waitpid函数4.如何…
阅读更多...
为什么 ChatGPT 输出时经常会中断，需要输入“继续” 才可以继续输出？

为什么 ChatGPT 输出时经常会中断，需要输入“继续” 才可以继续输出？

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;蚂蚁集团高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《EffectiveJava》独家解析》专栏作者。 热门文章推荐…
阅读更多...
树莓派Pico开发板I2C OLED显示模块接口与MicroPython编程

树莓派Pico开发板I2C OLED显示模块接口与MicroPython编程

首先简要介绍I2C接口及I2C接口OLED显示模块&#xff0c;然后讲述Pico开发板I2C总线引脚及其与I2C总线OLED SSD1306显示模块的接口原理&#xff0c;最后给出Pico开发板控制OLED屏显示文字/图形的MicroPython程序实例。 一、I2C接口简介 I2C/IIC/I2C&#xff08;Inter-Integrated…
阅读更多...
Linux内核Socket通信原理和实例讲解

Linux内核Socket通信原理和实例讲解

关于对 Socket 的认识&#xff0c;大致分为下面几个主题&#xff0c;Socket 是什么&#xff0c;Socket 是如何创建的&#xff0c;Socket 是如何连接并收发数据的&#xff0c;Socket 套接字的删除等。Socket 是什么以及创建过程一个数据包经由应用程序产生&#xff0c;进入到协议…
阅读更多...
平板触控笔哪些品牌好？ipad触控笔推荐平价

平板触控笔哪些品牌好？ipad触控笔推荐平价

苹果电容笔与平替电容笔两者需要根据我们的预算以及需求去选择&#xff0c;要是日常多用于用于绘画&#xff0c;建议可以用Apple Pencil&#xff0c;而对于日常仅仅用于学习与记笔记&#xff0c;可以用平替电容笔&#xff0c;由于平替电容笔的品质与表现都非常优秀。小编整理了…
阅读更多...
初识进程

初识进程

文章目录一、进程的概念1. 进程是什么及进程的管理2. Linux 下的 pcb3. 系统调用接口 getpid 和 getppid4. 系统调用接口 fork一、进程的概念 1. 进程是什么及进程的管理 在 Linux下 ./binaryfile 运行一个程序或者在 Windows下双击运行一个程序时&#xff0c;程序就变成了一个…
阅读更多...
【百面成神】spring基础12问，你能坚持到第几问

【百面成神】spring基础12问，你能坚持到第几问

前 言 &#x1f349; 作者简介&#xff1a;半旧518&#xff0c;长跑型选手&#xff0c;立志坚持写10年博客&#xff0c;专注于java后端 ☕专栏简介&#xff1a;java面试宝典&#xff0c;特点&#xff1a;全、精、深、简&#xff0c;力求每个核心知识点1分钟回答好。 &#x1f3…
阅读更多...
RK3588平台开发系列讲解（视频篇）RTP H264 码流打包详解

RK3588平台开发系列讲解（视频篇）RTP H264 码流打包详解

平台内核版本安卓版本RK3588Linux 5.10Android 12文章目录 一、单 NALU 封包方式二、组合封包方式三、分片封包方式沉淀、分享、成长，让自己和他人都能有所收获！😄 📢 H264 码流是放在 RTP 的有效载荷部分的。因此有效载荷前面的 RTP 头部跟码流本身是没有关系的，所以我…
阅读更多...
Python|蓝桥杯进阶第六卷——搜索

Python|蓝桥杯进阶第六卷——搜索

欢迎交流学习~~ 专栏&#xff1a; 蓝桥杯Python组刷题日寄 蓝桥杯进阶系列&#xff1a; &#x1f3c6; Python | 蓝桥杯进阶第一卷——字符串 &#x1f50e; Python | 蓝桥杯进阶第二卷——贪心 &#x1f49d; Python | 蓝桥杯进阶第三卷——动态规划 ✈️ Python | 蓝桥杯进阶…
阅读更多...
mysql数据库介绍

mysql数据库介绍

&#x1f49c;今天对mysql的一些基础概念进行讲诶横扫&#xff0c;如概念、特点、优势、发展历史等等。对之前内容感兴趣的同学可以参考&#x1f447;&#xff1a; 链接: mysql学习之数据系统概述 &#x1f3be;让我们开始今日份的学习吧&#xff01; 目录1. mysql的基本概念…
阅读更多...
十七、网上商城项目（5）

十七、网上商城项目（5）

本章概要 购物车 购物车状态管理配置购物车组件 结算页面用户管理 用户状态管理配置用户注册组件用户登录组件 17.8 购物车 在一个电商网站中&#xff0c;购物车在很多页面都需要用到&#xff0c;因此非常适合放在 Vuex 的 store 中进行集中管理。在本项目中&#xff0c;采…
阅读更多...
【北大青鸟天府校区的Java专业怎么样？】

【北大青鸟天府校区的Java专业怎么样？】

北大青鸟天府校区是北大青鸟总部在西南投资兴办的重点校区&#xff0c;拥有极为强大的外部教育资源和就业资源&#xff0c;使咱们的学员能够享受更好、更完善的教学资源。超过23年的办学经验&#xff0c;培养了超过10000位学员&#xff0c;保障就业&#xff0c;学员就业率达到9…
阅读更多...
[入门必看]数据结构2.3：线性表的链式表示

[入门必看]数据结构2.3：线性表的链式表示

[入门必看]数据结构2.3&#xff1a;线性表的链式表示第二章 线性表2.3 线性表的链式表示知识总览2.3.1 单链表的定义2.3.2_1 单链表的插入删除2.3.2_2 单链表的查找2.3.2_3 单链表的建立2.3.3 双链表2.3.4 循环链表2.3.5 静态链表2.3.6 顺序表和链表的比较2.3.1 单链表的定义单…
阅读更多...
JUC高级四:Java内存模型之JMM

JUC高级四:Java内存模型之JMM

JUC高级四:Java内存模型之JMM 1. 计算机硬件存储体系(JMM为什么诞生) 因为有这么多级的缓存(cpu和物理主内存的速度不一致的)&#xff0c;CPU的运行并不是直接操作内存而是先把内存里边的数据读到缓存&#xff0c;而内存的读和写操作的时候就会造成不一致的问题 在我们cpu寄存…
阅读更多...
WebRTC开源库内部调用abort函数引发程序发生闪退问题的排查

WebRTC开源库内部调用abort函数引发程序发生闪退问题的排查

目录 1、初始问题描述 2、使用Process Explorer工具查看到处理音视频业务的rtcmpdll.dll模块没有加载起来 3、使用Dependency Walker工具查看到rtcmpdll.dll依赖的库有问题 4、更新库之后Debug程序启动时就发生异常&#xff0c;程序闪退 5、VS调试时看不到有效的函数调用堆…
阅读更多...
十大Python可视化工具，太强了

十大Python可视化工具，太强了

今天介绍Python当中十大可视化工具&#xff0c;每一个都独具特色&#xff0c;惊艳一方。 Matplotlib Matplotlib 是 Python 的一个绘图库&#xff0c;可以绘制出高质量的折线图、散点图、柱状图、条形图等等。它也是许多其他可视化库的基础。 import matplotlib.pyplot as p…
阅读更多...
OpenCV入门（二十）快速学会OpenCV 19 对象测量

OpenCV入门（二十）快速学会OpenCV 19 对象测量

OpenCV入门&#xff08;二十&#xff09;快速学会OpenCV 19 对象测量1.对象测量2.多边形拟合3.计算对象中心作者&#xff1a;Xiou 1.对象测量 opencv 中对象测量包括&#xff1a; 如面积&#xff0c;周长&#xff0c;质心&#xff0c;边界框等。 弧长与面积测量&#xff1b; …
阅读更多...
最新文章

Copyright @ 2022~2023