时间戳

首页 > 技术文章 > （九）javaScript的基本使用

（九）javaScript的基本使用

shyroke 2017-02-25 15:05 原文

<script type="text/javascript">
				var userName;
				var userAge;
				function interInfo(){
					userName=prompt("请输入您的姓名");
					userAge=prompt("请输入您的年龄");
				}
				function showInfo(){
					document.write("您的名字是"+userName+"您的年龄是"+userAge);
				}
		</script>
	</head>
	<body>
		<p>信息登记系统</p>
		<button onclick="interInfo();">填写个人信息</button>
		<button onclick="showInfo();">显示信息</button>
	</body>

 

 结果：

解析：   prompt(msg,defaultText)参数

 描述
msg 可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText 可选。默认的输入文本。

 

 

<script type="text/javascript">
				function jisuan(){
					var price=document.jisuanqi.price.value;
					var mount=document.jisuanqi.mount.value;
					var total=parseFloat(price)*parseFloat(mount);
					document.jisuanqi.total.value=total;
				}	
		</script>
	</head>
	<body contextmenu="">
		<p>竞拍系统</p>
		<form name="jisuanqi">
			竞拍价格：<input type="text"  name="price"/><br/>
			购买数量：<input type="text"  name="mount"/><br/>
			预计总价：<input type="text" name="total" readonly="readonly" /><br/>
				<input type="button" value="计算总价" onclick="jisuan()"/>
		</form>
	</body>

 

 结果：

  解析：  获取表单中输入的数据： document.表单名.表单元素名.value；    

 

 

<script type="text/javascript">
				function jisuan(){
					var grade;  //不同支付方式的折扣
					var f=document.jisuanqi.pay.value;  //拿到select表单元素的值
					var price=document.jisuanqi.price.value;
					var mount=document.jisuanqi.mount.value;
				
					switch(parseInt(f)){
					case 1: grade=0.8;break;
					case 2: grade=0.9;break;
					case 3: grade=1;break;
					default: alert("重新选择支付方式");
					}
					var total=parseFloat(price)*parseFloat(mount)*grade;
					document.jisuanqi.total.value=total;
				}	
		</script>
	</head>
	<body contextmenu="">
		<p>竞拍系统</p>
		<form name="jisuanqi">
			竞拍价格：<input type="text"  name="price" /><br/>
			购买数量：<input type="text"  name="mount"/><br/>
			支付方式:<select name="pay">
					<option  value="1">支付宝/微信</option>   
					<option value="2">银行卡</option>
					<option value="3">充值卡</option>
				</select><br/>
			预计总价：<input type="text" name="total" readonly="readonly" /><br/>
				<input type="button" value="计算总价" onclick="jisuan()"/>
		</form>
	</body>

 

 结果：

解析：  表单元素中的value 属性可设置或返回密码域的默认值。   而在option元素中。value属性设置或返回的是自定义的值，这个自定义的值与用户选择的值一对一对应。

<style type="text/css">
	.aa{
	width:50px;
	height:20px;
	}
</style>
<script>
	function jisuan(op){
		var sum1=document.jisuanqi.num1.value;
		var sum2=document.jisuanqi.num2.value;
		if(op=="jia"){
			var result=parseFloat(sum1)+parseFloat(sum2);
		}else if(op=="jian"){
			var result=parseFloat(sum1)-parseFloat(sum2);
		}else if(op=="cheng"){
			var result=parseFloat(sum1)*parseFloat(sum2);
		}else if(op=="chu"){
			var result=parseFloat(sum1)/parseFloat(sum2);
		}
		document.jisuanqi.result.value=result;
	}
</script>
</head>
<body>
	<p>小型计算器</p>
	<form name="jisuanqi">
	第一个数<input type="text" name="num1" /><br/>
	第二个数<input type="text" name="num2" /><br/><br/>
		<input type="button" value="+" name="plus" class="aa" onclick="jisuan('jia');"/>
		<input type="button" value="-" name="jian" class="aa" onclick="jisuan('jian');"/>
		<input type="button" value="*" name="cheng" class="aa" onclick="jisuan('cheng');"/>
		<input type="button" value="/" name="chu" class="aa" onclick="jisuan('chu');"/><br/><br/>
		计算结果<input type="text" name="result"/>
	</form>
</body>

 

 

 

<script type="text/javascript">
		function nameOver(){
			if(document.f.userName.value=="请输入3~8个字符"){  //鼠标移到输入框，清空
				document.f.userName.value="";
			}
		}
		function nameOut(){    
			if(document.f.userName.value==""){  //鼠标移开输入框，如果没有输入，提醒输入
				document.f.userName.value="请输入3~8个字符";
			}
		}
		function butOver(){
			document.f.button.value="悬浮";
		}
		function butOut(){
			document.f.button.value="离开";
		}
	</script>
</head>
<body >	 
<form name="f">
       用户名: <input type="text" value="请输入3~8个字符" name="userName" onMouseOver="nameOver()" onMouseOut="nameOut()"/><br/>
       密 码:<input type="password" name="userPass" /><br/>
      <input type="button" value="正常" onMouseOver="butOver()" name="button"  onMouseOut="butOut()"/>
</form>
</body>

 


结果：

解析 ：

 





 




 


用图片代替提交按钮






<script type="text/javascript">
	function submit(){
	document.f.submit();
	}
	</script>
</head>
<body >	 
	<form name="f">
		 用户名：<input type="text"/><br/>
		密  码：<input type="password" /><br/>
		确认密码：<input type="password" /><br/>
		<input type="image" src="../images/zhuce.jpg" onclick="submit()"/>
	</form>
</body>





 



结果：

解析： 


1.  eclipse开发工具下，图片最好放在相应的文件夹里。


2.表单提交有两种方法： （1） type="submit"  点击按钮即可提交    （2） 调用表单的submit（）方法。


 







	

		


推荐阅读