JavaScript的应用
来源：互联网 发布：windows iscsitarget 编辑：程序博客网 时间：2024/06/11 19:49
javascript的应用
校验表单
一、步骤分析
- 第一步： 确定事件(onsubmit)并为其绑定一个函数
- 第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
- 第三步： 对用户输入的数据进行判断
- 第四步： 数据合法(让表单提交)
- 第五步：数据非法(给出错误提示信息， 不让表单提交)
问题： 如何控制表单提交？
关于事件 onsubmit： 一般用于表单提交的位置，那么需要在定义函数的时候给出一个
返回值。
onsubmit = return checkForm()
二、代码实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> function checkForm(){ //alert("aa"); /**校验用户名*/ //1.获取用户输入的数据 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //2.给出错误提示信息 alert("用户名不能为空!"); return false; } /*校验密码*/ var pValue = document.getElementById("password").value; if(pValue==""){ alert("密码不能为空!"); return false; } /**校验确认密码*/ var rpValue = document.getElementById("repassword").value; if(rpValue!=pValue){ alert("两次密码输入不一致!"); return false; } /*校验邮箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("邮箱格式不正确!"); return false; } } </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一个一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--2.导航栏部分--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首页</font> </a> <a href="#"> <font color="white">手机数码</font> </a> <a href="#"> <font color="white">电脑办公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用电器</font> </a> </td> </tr> <!--3.注册表单--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一个十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user"/> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password"/> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> <!--4.广告图片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情链接和版权信息--> <tr> <td align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <p> Copyright © 2005-2016 版权所有 </p> </td> </tr> </table> </body></html>JS代码：
<script> function checkForm(){ //alert("aa"); /**校验用户名*/ //1.获取用户输入的数据 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //2.给出错误提示信息 alert("用户名不能为空!"); return false; } /*校验密码*/ var pValue = document.getElementById("password").value; if(pValue==""){ alert("密码不能为空!"); return false; } /**校验确认密码*/ var rpValue = document.getElementById("repassword").value; if(rpValue!=pValue){ alert("两次密码输入不一致!"); return false; } /*校验邮箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("邮箱格式不正确!"); return false; } } </script>HTML部分：
<form action="#" method="get" name="regForm"onsubmit="return checkForm()">需要在指定位置添加 id使用 JS 完成首页轮播图效果案例
一、技术分析：
- 获取元素 document.getElementById(“id 名称”)
- 事件(onload)
- 定时操作： setInterval(“changeImg()”,3000);
二、步骤分析：
- 第一步： 确定事件(onload)并为其绑定一个函数
- 第二步：书写绑定的这个函数
- 第三步： 书写定时任务(setInterval)
- 第四步： 书写定时任务里面的函数
- 第五步： 通过变量的方式， 进行循环(获取轮播图的位置，并设置 src 属性)（在循环的时候需要注意到了最后一张图片的时候要重置。）
三、代码实现：
图片切换：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>切换图片</title> <style> div{ border: 1px solid white; width:500px ; height: 350px; margin: auto; text-align: center; } </style> <script> var i=1; function changeImg(){ i++; document.getElementById("img1").src="../../img/"+i+".jpg"; if(i==3){ i=0; } } </script> </head> <body> <div> <input type="button" value="下一张" onclick="changeImg()"/> <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/> </div> </body></html>javascript代码：
<script> function init(){ //书写轮图片显示的定时操作 setInterval("changeImg()",3000); } //书写函数 var i=0 function changeImg(){ i++; //获取图片位置并设置src属性值 document.getElementById("img1").src="../img/"+i+".jpg"; if(i==3){ i=0; } }</script>三、使用 JS 完成页面定时弹出广告
1.需求分析
我们希望在首页中的顶部做一个定时弹出广告图片。
2.技术分析
- 获取图片的位置(document.getElementById(“”))
- 隐藏图片： display： none
- 定时操作： setInterval(“显示图片的函数”， 3000);
3.步骤分析
- 第一步： 在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
- 第二步： 确定事件(onload)并为其绑定一个函数
- 第三步： 书写这个函数(设置一个显示图片的定时操作)
- 第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
- 第五步： 清除显示图片的定时操作()
- 第六步： 书写隐藏图片的定时操作
- 第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
- 第八步： 清除隐藏图片的定时操作()
4.代码实现
<script type="text/javascript"> function init(){ //书写轮图片显示的定时操作 setInterval("changeImg()",3000); //1.设置显示广告图片的定时操作 time = setInterval("showAd()",3000); } //书写函数 var i=0 function changeImg(){ i++; //获取图片位置并设置src属性值 document.getElementById("img1").src="../img/"+i+".jpg"; if(i==3){ i=0; } } //2.书写显示广告图片的函数 function showAd(){ //3.获取广告图片的位置 var adEle = document.getElementById("img2"); //4.修改广告图片元素里面的属性让其显示 adEle.style.display = "block"; //5.清除显示图片的定时操作 clearInterval(time); //6.设置隐藏图片的定时操作 time = setInterval("hiddenAd()",3000); } //7.书写隐藏广告图片的函数 function hiddenAd(){ //8.获取广告图片并设置其style属性的display值为none document.getElementById("img2").style.display= "none"; //9.清除隐藏广告图片的定时操作 clearInterval(time); }</script>html代码：
<body onload="init()"> <!--定时弹出广告图片位置--> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>总结
javascript 的引入方式
内部引入方式：
直接将 javascript 代码写到
外部引入方式：
需要创建一个.js文件，在里面书写 javascript代码，然后在 html文件中通过 script标签的 src 属性引入该外部的 js 文件
0 0
- Javascript随机的应用
- javaScript的一些应用
- 有趣的javascript应用
- javascript的高级应用
- javascript对象的应用
- javascript队列的应用
- JavaScript的应用浅谈
- JavaScript数组的应用
- JavaScript的应用
- JavaScript的应用二
- javascript定时器的应用
- JavaScript中闭包的应用
- javascript的getElementById()的应用
- javascript的getElementsByName()的应用
- javascript的getElementsByTagName()的应用
- javascript的hasChildNodes()的应用
- javascript的replaceChild的应用
- javascript的getAttribute的应用
- web.xml 配置中classpath: 与classpath*:的区别
- 商城快递查询 （快递100）
- java-笔记
- linux下python导入xgboost出现的问题小结
- firstobject xml 编辑器解析多个幻灯片的ppt
- JavaScript的应用
- Linux Shell 文本处理工具集锦
- 串口中断结合定时器实现稳定可靠的串口接收
- ORACLE中关于外键缺少索引的探讨和总结
- 条件随机场（CRF）
- PyCharm的快捷方式
- Spring 学习
- Caused by: java.lang.NoSuchMethodError: freemarker.template.Configuration.<init>(Lfreemarker/templat
- 存储过程实例5：存储过程执行truncate ，动态删除表，表明参数化
