（九）javaScript的基本使用
<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（）方法。
浙公网安备 33010602011771号