注意:在JavaScript 代码实现中,操作步骤很重要,就是三步:确定事件;定义事件要触发的函数;函数内容。
步骤:a、确定事件,此处为提交事件 onsubmit b、事件要触发的函数,checkForm c、在函数中要去做一些校验
setInterval 和 setTimeout(指定毫秒后调用函数),两个类似。 用法
onload 事件会在页面或图像加载完成后立即发生。如:网页打开后,页面加载完成,轮播图开始自动切换图片。 支持该事件的标签和JS对象有:
需求分析
当我们打开一个页面后,它会过几秒后弹出一个广告,再过几秒后消失
技术分析 步骤
之前做的数据校验,是弹出一个警告框,提示用户输入不正确。改善后将会实现,当用户输入信息有问题时,在输入框后面给用户一个友好提示。用到的事件,如下图: 分析: 下面代码中的 checkEmail()函数就是使用外部引用文件中的函数。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 引入外部的js文件 --> <script type="text/javascript" src="../js/regutils.js" ></script> <script> /* 1. 确定事件 : onfocus 2. 事件要驱动函数 3. 函数要干一些事情: 修改span的内容 */ function showTips(spanID,msg){ //首先要获得要操作元素 span var span = document.getElementById(spanID); span.innerHTML = msg; } /* 校验用户名: 1.事件: onblur 失去焦点 2.函数: checkUsername() 3.函数去显示校验结果 */ function checkUsername(){ //获取用户输入的内容 var uValue = document.getElementById("username").value; //对输入的内容进行校验 //获得要显示结果的span var span = document.getElementById("span_username"); if(uValue.length < 6){ //显示校验结果 span.innerHTML = "<font color='red' size='2'>对不起,太短</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; return true; } } /* 密码校验 */ function checkPassword(){ //获取密码输入 var uPass = document.getElementById("password").value; var span = document.getElementById("span_password"); //对密码输入进行校验 if(uPass.length < 6){ span.innerHTML = "<font color='red' size='2'>对不起,太短</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>"; return true; } } /* 确认密码校验 * */ function checkRePassword(){ //获取密码输入 var uPass = document.getElementById("password").value; //获取确认密码输入 var uRePass = document.getElementById("repassword").value; var span = document.getElementById("span_repassword"); //对密码输入进行校验 if(uPass != uRePass){ span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>"; return false; }else{ span.innerHTML = ""; return true; } } /* 校验邮箱 * */ function checkMail(){ var umail = document.getElementById("email").value; var flag = checkEmail(umail); var span = document.getElementById("span_email"); //对邮箱输入进行校验 if(flag){ span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; return true; }else{ span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>"; return false; } } function checkForm(){ var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail(); return flag; } </script> </head> <body> <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" > 用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br /> 密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br /> 确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br /> 邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br /> 手机号:<input type="text" id="text" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
效果图
可实现双击左边的,就会移动到右边。或者点链接也可实现移动。