（九）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 οnclick="interInfo();">填写个人信息</button><button οnclick="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="计算总价" οnclick="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="计算总价" οnclick="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" οnclick="jisuan('jia');"/><input type="button" value="-" name="jian" class="aa" οnclick="jisuan('jian');"/><input type="button" value="*" name="cheng" class="aa" οnclick="jisuan('cheng');"/><input type="button" value="/" name="chu" class="aa" οnclick="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" οnclick="submit()"/></form>
</body>
结果：解析：
相应的文件夹里。
转载于:https://www.cnblogs.com/shyroke/p/6441859.html
（九）javaScript的基本使用相关推荐
- JavaScript学习总结(九)——Javascript面向(基于)对象编程
转载自 JavaScript学习总结(九)--Javascript面向(基于)对象编程 一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了 ...
- JavaScript 网页编程（一）——JavaScript 基础语法
目录 一.计算机编程基础 二.初识 JavaScript 三.JavaScript 变量 四.JavaScript 数据类型 五.标识符.关键字.保留字 六.JavaScript 运算符(操作符) 七 ...
- 前端工程师 - 面试题 (最新,最全)
一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数.在本质上,闭包就 是将函数内部和函数外部连接起来的一座桥梁. (2)闭包可以用在许多地方.它的最大用处有两个,一个是可以读取 ...
- 什么是XML？如何学习XML？
1.什么是XML? XML是一种类似于HTML的标记语言 XML是用来描述数据的 XML的标记不是在XML中预定义的,你必须定义自己的标记 XML使用文档类型定义(DTD)或者模式(Schema)来描 ...
- 第一周 Web开发入门(下)
七.JavaScript对象模型---BOM对象 使JavaScript可以与浏览器进行对话. 1.window对象 window.innerHeight - 浏览器窗口的内高度(以像素计) wind ...
- Html5+js测试题【完整版】
一.闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包三个特性: 1.函数嵌套函数 ; ...
- java程序设计教学大纲_《Java程序设计》课程教学大纲.pdf
<Java程序设计>课程教学大纲 一. 课程的性质和任务 课程性质:<Java程序设计>是信息与网络技术专业的一门选修课 程,是学习Java语言在互联网中使用技巧的一门课程. ...
- JavaScript容易犯错的九个陷阱
以下是JavaScript容易犯错的九个陷阱.虽然不是什么很高深的技术问题,但注意一下,会使您的编程轻松些,即所谓make life easier. 以及对某些陷阱会混杂一些评点. 1. 最后一个逗号 ...
- JavaScript|拖拽|仿Android手机九点连线开锁
最简单的JavaScript拖动代码 <script> var xx=0,yy=0; function a(v) { xx=event.x-v.offsetLeft; yy=event.y ...
- JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十九)强制重做
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
最新文章
- 【免费下载】“后红海”时代，独家揭秘当下大数据体系
- P2522 [HAOI2011]Problem b
- 工作263:弹性布局 修改样式
- 力扣628. 三个数的最大乘积
- java判断输入值是否在数组_java判断特定值是否在数组中的方法
- django登录验证码操作
- 几率大的多线程面试题（含答案）
- arcgis重心迁移分析_ArcGIS支持下三峡库区适度人口重心迁移研究
- linux shc shell脚本_Linux系统中Shell脚本使用Shc和gzexe加密/解密
- SYN包与SYN攻击原理
- 我的原创IT著作再次被中科院图书馆、国图等国家级学术机构收藏！
- 计算机无理数转根号,[转载]从根号二是无理数到孤独的根号三
- signature=8df1e41f626c2f25b2dd4e97b89cc127,来用百度密语吧！！！
- POJ 1417 True Liars 带权并查集 + 背包
- 【SDCC讲师专访】房芳：高德地图开放平台，一场本地生活服务市场入口的争夺战
- Eclypse-Z7 + Zmod ADC 1410 基础环境搭建（vivado部分）
- ESP8266桌面气象站
- C/C++ 项目必读：代码格式化和静态分析检查的一站式工作流 Cpp Linter
- 白皮书的参考文献格式怎么写？
- python程序的控制结构思维导图_python学习之路2（程序的控制结构）