小小总结————JavaScript总结

最新推荐文章于 2022-10-27 15:10:07 发布

lqpingxin

最新推荐文章于 2022-10-27 15:10:07 发布

阅读量447

点赞数

本文链接：https://blog.csdn.net/u011144175/article/details/9530305

版权

小小总结————JavaScript总结

1.JavaScript的基础语言

JavaScript是一种脚本语言，作用：提供用户交互、动态更改内容和数据验证。JavaScript插入HTML中主要有两种方法：一是使用 <SCRIPT> 标签将语句嵌入文档，例如，

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>open</title>
<script language="javascript">

//JavaScript语句
</script>
</head>

一是将 JavaScript 源文件链接到 HTML 文档中，例如，

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js的引用</title>
<script  src="F:\eclipse\JavaScriptTest\time.js">//*.js文件所在的地址
</script>
</head>

此外基础语法包括，变量的定义、变量的赋值、prompt的用法document.write（）的用法，“+”表示字符串连接以及alert() 表示弹出信息框。

<HTML>
<HEAD> 
<TITLE>使用变量</TITLE>
<SCRIPT LANGUAGE = "Javascript">
	var x;//定义变量
	x=prompt("淘宝网竟拍，请出一口价",1) ;//弹出框（字符串，默认值），返回值为字符串
	document.write("拍卖价格"+x+"<BR>")  // "+"用来连接多个字符串
	document.write("恭喜您，您以最高价拍卖成功！");//相当于java里的print
	alert("欢迎下次光临！");//弹出警告框
</SCRIPT>
</HEAD>
</HTML>

2.核心语句：数组的定义，if-else语句，switch语句函数的定义和调用

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义函数</title>
<script language="javaScript">
	function calcu(){//自定义函数
		var a=document.calu.num1.value;//获取值
		var b=document.calu.num2.value;
		if(a!=""&&b!=""){
			if(parseFloat(a)>0&&parseFloat(b)>0){
			var c=parseFloat(a)*parseFloat(b);//将String转化为数值
			document.calu.num3.value=c;	
				if(c>500&& c<1000){
					alert("购买总价超过500\n支付时将赠送超级Q币2枚！");
					}else if( c<2000){
						alert("购买总价超过1000\n赠送IBM智能鼠标一只!");
						} else {
							alert("购买总价超过2000\n直接与贵宾台联系");
							}
			}else{
				alert("请重新输入竞拍价格或竞拍数量！");
				}	
			}else{
				alert("请重新输入竞拍价格或竞拍数量！");
				}
		
		}

</script>
</head>

<body>
    <form  name ="calu" action="" method="get">
    
     竞拍价格：<input name="num1" type="text" value="120" /><br />

     竞拍数量：<input name="num2" type="text" value=""/><br />
	 预计总价：<input name="num3" type="text" size="15"/><br />
		<input name="getNum" type="button" value ="计算看看" onClick="calcu()"/>
    </form>


</body>
</html>

自定义函数：格式：function 函数名（参数……）{语句}与java不同：无返回值类型或void，参数无类型，调用时与表单事件一起

3.JavaScript的对象

JavaScript的对象分为三类：浏览器对象，脚本对象和HTML对象

浏览器对象分为三种：history、document、location，主要方法有prompt（），open（），setTimeout（），clearTimeout（）。以下是一个随机漂浮的广告的设置

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片替换</title>
</head>
<body>
<img src="1.jpg" onMouseOver="src='2.jpg'" onMouseOut="src='1.jpg'">
<!--注意大小写 -->
</body>
</html>

脚本对象包括String字符串对象、Date日期对象、Math数学对象等。String中方法主要有Length，indexOf。toUpperCase等

邮箱验证：这只是简单的邮箱验证，验证注册账号中是否有“@”和“.”的存在

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证邮箱</title>
<script language="javascript">
	function register()
	{
	var a=document.mailbox.addr.value;
	if(a.length==0){//输入是否有内容
		alert("请输入邮箱");
		return ;
		}
	if(a.indexOf("@",0)==-1){//是否还有"@"
	alert("邮箱输入错误，请重新输入");
	return ;
	}
	if(a.indexOf(".",0)==-1){//是否含有"."
	alert("邮箱输入错误，请重新输入");
	return ;
	}
	document.write("注册成功！");
	}
</script>
</head>
<body>
<form name="mailbox"action="" method="get">
请输入邮箱：<input name="addr" type="text"/> <br />
<input name="check" type="button"value ="注册" onClick="register()"/>
</form>
</body>
</html>

以下是一个每一秒钟刷新一下时间

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正在运行的时钟</title>
<script language="javascript">
function display(){
	var a=new Date();
	var h=a.getHours();
	var m=a.getMinutes();
	var s=a.getSeconds();//获取时分秒
	var apm="am";//表示上午和下午
	if(h>0&& h<12){
		document.time.good.value="早上好!"
　		}
	if(h>12&&h<18){
		document.time.good.value="中午好!";
		apm="pm";
		}
	if(h>18){
		document.time.good.value="晚上好!";
		amp="pm";
		}
	if(m<10){
		m="0"+m;
		}
	if(s<10){
		s="0"+s;
		}
		document.time.myDate.value="今天日期是"+a.getYear()+"年"+(a.getMonth()+1)+"月"+a.getDate()+"日";//设置日期输出格式
	document.time.myclock.value=h+":"+m+":"+s+apm;//设定时间输出的格式
	var mytime=setTimeout("display()",1000);
}
</script>
<STYLE type="text/css">

/*设置样式：无边框的文本框*/
INPUT {
	font-size: 50px;
	color: #CC0000;
	border-style:none 
}
</STYLE>
</head>
<body onLoad="display()"><form  name="time"action="" method="get">

  <div>
  <input name="good" type="text"size="25" /><br />
	<INPUT name="myDate" type="text"   value="" size="25" ><br />

    <input name="myclock" type="text" size="25"/>
</div>
</form>

<!--//设置输出样式 -->
</body>
</html>