JavaScript函数和windows对象_js windows对象大全-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63223374/article/details/123943721

JavaScript函数和windows对象

1.函数的概念
2.函数的核心语法
3.Window对象

1.函数的概念

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用

2.函数的核心语法

2.1常用系统函数

	parseInt ("字符串")
//将字符串转换为整型数字 
//如: parseInt ("86")将字符串“86”转换为整型值86

	parseFloat("字符串")
//将字符串转换为浮点型数字 
//如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.45

	isNaN()
//用于检查其参数是否是非数字

2.2自定义函数

创建函数

//无参函数
		function 函数名(){ 
    		 JavaScript代码; 
  		}

//有参函数
		function 函数名(参数1,参数2，… ){ 
   			JavaScript代码; 
 		}
//调用函数
//函数调用一般和表单元素的事件一起使用，调用格式：
   				//事件名＝“函数名( )";


//调用无参函数输出“我爱java”
		function showHello( ){
 			for(var i=0;i<5;i++){
        	 document.write("<h2>我爱Java</h2>");		 
     	 	}
		}
//单击此按钮时，调用函数showHello( )，执行函数体中的代码
<input name="btn" type="button" value="显示10次我爱Java" onclick="showHello()" />


//调用有参函数
//根据输入的次数，调用有参函数，显示“我爱Java”
		function showHello(count){//调用有参函数输出“HelloWorld”
   			for(var i=0;i<count;i++){
         		document.write("<h2>我爱Java</h2>");	 
     		}
		}
//单击此按钮时，调用函数showHello(count )，执行函数体中的代码
<input name="btn" type="button" value="请输入显示我爱Java的次数"  onclick="showHello(prompt('请输入显示我爱Java的次数：',''))"/>

//匿名调用函数
Function 函数名() {
	javaScript代码
}
调用函数：onclick="函数名()"

//网上常见匿名写法
//方式一：
事件名=function(){...}
//方式二： 
(function (){ JavaScript代码;}())


//直接运行函数
window.onload=function(){…}
<body onload= "事件名() " >

2.3编写一个四则运算函数

//使用switch判断运算符号

function account(){
//使用prompt输入两个数和运算符号，然后计算两个数的操作结果
 	var op1=prompt("请输入第一个数：","");
	var op2=prompt("请输入第二个数：","");
	var sign=prompt("请输入运算符号","")
	var result;
	opp1=parseFloat(op1);
	opp2=parseFloat(op2);

	switch(sign){
		case "+": //使用switch判断运算符号
		result=opp1+opp2;//调用函数计算两数的结果
		alert("两数运算结果为："+result);
		break;
		
		case "-":
		result=opp1-opp2;
		alert("两数运算结果为："+result);
		break;
		
		case "*":
		result=opp1*opp2;
		alert("两数运算结果为："+result);
		break;
		
		default:
		result=opp1/opp2;
		alert("两数运算结果为："+result);
		break;
	}
}
//body里面写一个按钮
<input name="btn" type="button" value="计算两数运算结果" onclick="jisj();" />

2.4变量的作用域

//变量的作用范围
<script language="javascript" type="text/javascript">
	//全局变量
		var num;
		function showHello(){
		//局部变量
		     for(var i=0;i<num;i++){
            	document.write("<h2>Hello World</h2>");		 
            }
		}
		function counts(){
   			num=prompt("请输入显示HelloWorld的次数：","");  
  			showHello();
		}
</script>
//body里面写一个按钮
<input name="btn" type="button" value="请输入显示HelloWorld的次数"  onclick="counts()"/>

3.Window对象

3.1常用的属性

screen；有关客户端的屏幕和显示性能的信息
history；有关客户访问过的URL的信息
location; 有关当前 URL 的信息

3.2常用的方法

prompt; 显示可提示用户输入的对话框
alert; 显示带有一个提示信息和一个确定按钮的警示框
confirm; 显示一个带有提示信息、确定和取消按钮的对话框
close; 关闭浏览器窗口
open; 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout; 在指定的毫秒数后调用函数或计算表达式
setInterval; 按照指定的周期（以毫秒计）来调用函数或表达式

//confirm()方法
<script language="javascript" type="text/javascript">
		var flag=confirm("确认要删除此条信息吗？");
		if(flag==true){
			alert("删除成功！");
		}else{
			alert("你取消了删除");
		}
</script>

3.3使用window对象

//弹出窗口
<input name="open1" type="button" value="弹出窗口" onclick="open_adv()" />
//弹出固定大小窗口，且无菜单栏等
<input name="open2" type="button" value="弹出固定大小窗口，且无菜单栏等"  onclick="open_fix_adv()"/>
 //全屏显示
<input name="full" type="button" value="全屏显示"  onclick="fullscreen()"/>
 //打开确认窗口
<input name="con" type="button" value="打开确认窗口"  onclick="confirm_msg()"/>

3.4Date对象

//语法
		var 日期对象=new Date(参数)
 //示例
		var  today=new Date();   //返回当前日期和时间
		var tdate=new Date("september 1,2009,14:58:12");
//setXxx;这些方法用于设置时间和日期值
//getXxx;这些方法用于获取时间和日期值
//Seconds 和 Minutes;分钟
//Hours;小时
//Day;星期
//Date;月份中的天数
//Months;一月至十二月

3.5实现时钟特效

<script language="javascript" type="text/javascript">
		function disptime(){
			var today = new Date(); //获得当前时间
			var hh = today.getHours();  //获得小时、分钟、秒
		 	var mm = today.getMinutes();
			var ss = today.getSeconds();
			document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
		}
</script>
<body onload="disptime()">
<div id="myclock"></div>

//如果想让时间每隔1秒调用显示时间的方法一直不停的走的话可以使用setTimeout( )方法或setInterval()
//setTimeout()用法
setTimeout（“调用的函数”, “指定的时间后"）;

//setInterval()方法
setInterval（"调用的函数", "指定的时间间隔"）;
//setTimeout()只执行disptime()一次，如果要多次调用使用
//setInterval()者者让disptime()自身再次调用setTimeout()

3.6实现12小时时钟效果

//实现思路
//使用getFullYear()获得当前年份
//使用getMonth()+1获得当前月份
//使用getDate()获得当前日期
//根据getHours()获得的小时，使用if语句判断当前时间是否大于12 
//使用getDay()获取当前表示星期几的数字，然后使用switch设置当前星期几
<script type="text/javascript">

function clock_12h(){
 var today = new Date(); //获得当前时间
 //获得年、月、日，Date()函数中的月份是从0－11计算
 var year = today.getFullYear();  
 var month = today.getMonth()+1;
 var date = today.getDate();
 var hour = today.getHours();  //获得小时、分钟、秒
 var minute = today.getMinutes();
 var second = today.getSeconds();
 
 var apm="AM"; //默认显示上午: AM
 if (hour>12) { //按12小时制显示
    hour=hour-12;
    apm="PM"  ;
 }
 var weekday = 0;
 switch(today.getDay()){
    case 0:
  	weekday = "星期日";
	break;
    case 1:
  	weekday = "星期一";
	break;
	case 2:
  	weekday = "星期二";
	break;
	case 3:
  	weekday = "星期三";
	break;
	case 4:
  	weekday = "星期四";
	break;
	case 5:
  	weekday = "星期五";
	break;
	case 6:
  	weekday = "星期六";
	break;
 }
 
  /*设置div的内容为当前时间*/
 document.getElementById("myclock").innerHTML="<h2>你好，欢迎访问贵美商城！</h2><h2>"+year+"年"+month+"月"+date+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"</h2>";

}
/*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
var myTime = setInterval("clock_12h()",1000);

</script>
<div id="myclock"></div>

好了本期讲解就到此结束了，如果还想了解更多的话记得关注我噢！