JS第二课

Posted on   夜雨初凉  阅读(29)  评论(0)  编辑  收藏  举报

函数方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bt{
				width: 57px;
			}
		</style>
		
		<script>
			//1.无参无返回
			//js用var声明所有的变量类型
			function getA(){
				alert("无参无返回");
			}
			
			//2.有参无返回 (参数只需要写名称即可,多个参数使用逗号分开)
			//function getB(a,b){
			function getB(a,b){
				alert(a+b);
			}
			
			//3.无参有返回
			function getC(){
				return "abc";
			}
			
			//有返回的方法一定要接收
			function getCC(){
				//方法中直接调用方法
				//为了获取"abc"的返回值
				var c=getC();
				alert(c);
			}
			
			//4.有参有返回
			function getD(a){
				return "一包合成天下!";
			}
			
			function getDD(a){
				alert(getD(a));
			}
			
			
			//计算器
			function jia(){
				//如何获取文本框的值
				//document文档对象.表单名称.文本框的名称.value值
				var n1=document.myform.num1.value;
				var n2=document.myform.num2.value;
				
				//如何给文本框复制 value
				//parseInt() 字符串转换成int
				//Number() 字符串转成小数/整数 自动
				document.myform.res.value=Number(n1)+Number(n2);
				
				//document.myform.res.value="";
				//<input type="text" name="res" value=""/>
			}
			
			
		</script>
		
	</head>
	<body>
		<!-- onclick点击事件  = "方法名()" -->
		<input type="button" onclick="getA()" value="测试无参无返回"/>
		<input type="button" onclick="getB(1,'2')" value="测试有参无返回"/>
		<input type="button" onclick="getCC()" value="测试无参有返回"/>
		<input type="button" onclick="getDD(100)" value="测试有参有返回"/>
		
		<!--表单名称自定义-->
		<form name="myform">
			<table border="1">
				<tr>
					<td><img src="img/shop.gif"/></td>
					<td>购物简易计算器</td>
				</tr>
				<tr>
					<!--value="1" 文本框的默认值-->
					<td>第一个数</td>
					<!--文本框名称自定义-->
					<td><input type="text" name="num1" value="1"/></td>
				</tr>
				<tr>
					<td>第二个数</td>
					<td><input type="text" name="num2"/></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="+" class="bt" onclick="jia()"/>
						<input type="button" value="-" class="bt" onclick="jia()" />
						<input type="button" value="*" class="bt" onclick="jia()"/>
						<input type="button" value="/" class="bt" onclick="jia()"/>
					</td>
				</tr>
				<tr>
					<td>计算结果</td>
					<td><input type="text" name="res"/></td>
				</tr>
			</table>
		</form>
	</body>
</html>

时间函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		
		function getD(){
			//1.日期函数
			//Date()
			var a=new Date();
			//document.write(a);
			//Fri Aug 20 2021 15:35:08 GMT+0800 (中国标准时间)
			
			//获取年
			var year=a.getFullYear();
			
			//***获取月 0~11
			//老外最喜欢从0开始  
			var mon=a.getMonth()+1;
			
			//获取日
			var dat=a.getDate();
			
			//获取小时
			var hour=a.getHours();
			
			//获取分钟
			var mins=a.getMinutes();
			
			//获取秒钟
			var sec=a.getSeconds();
			//如何补0 -- 月,日,时,分,秒
			if(sec<10){
				sec="0"+sec;
			}
			
			
			//***获取星期 0~6
			//0就是星期日
			var day=a.getDay();
			var week;
			switch(day){
				case 0:
					week="日";
				break;
				case 1:
					week="一";
				break;
				case 2:
					week="二";
				break;
				case 3:
					week="三";
				break;
				case 4:
					week="四";
				break;
				case 5:
					week="五";
				break;
				case 6:
					week="六";
				break;
			}
			
			var temp="当前时间为 : "+year+"年"+mon+"月"+dat+"日 "+hour+":"+mins+":"+sec+" 星期"+week;
			//document.write(temp);
			
			//将H1标签中的值替换
			//1)获取标签h1 -- 对象
			var t=document.getElementById("ti");
			//[object HTMLHeadingElement] -- 对象
			//t.innerHTML 可以获取内部的值 : 当前时间为 : 2021年8月20日 15:31:30 星期五
			//***死记 : h1标签如何获取标签中显示的值 -- 标签对象.innerHTML
			//***所有的双标签结构基本上都可以如此操作
			//alert(t.innerHTML);
			//直接可以赋值也可以取值
			t.innerHTML=temp;
			
			
			//2.延时器 -- 设置间隔时间后,执行一次(不能循环)
			//setTimeout("方法()",间隔时间毫秒)
			//递归(自己调用自己) -- 死循环
			//写在方法最下面一行
			setTimeout("getD()",1000);
		}
		
		//页面加载事件 -- 页面加载完毕会调用方法
		//onload=方法名称;
		onload=getD;
		</script>
	</head>
	<body>
		<input type="button" value="点击" onclick="getD()" />
		<h1 id="ti">当前时间为 : 2021年8月20日 15:31:30 星期五</h1>
	</body>
</html>
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

随笔 - 51, 文章 - 0, 评论 - 0, 阅读 - 10758

Copyright © 2025 夜雨初凉
Powered by .NET 9.0 on Kubernetes

点击右上角即可分享
微信分享提示
SQL AI 助手