(九)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()方法。