函数方法
<!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>
JS第二课