JS，CSS联动
1，动态绑定事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="点我试试" onclick="doWrite();"/> <div id="hello" style="display: inline;"> </div> </body> </html> <script type="text/javascript"> function doWrite(){ // alert("hello world"); //1找到对应的div ele=document.getElementById("hello"); //2向div中写入字符串 ele.innerText="hello woshi lushuang"; } </script>
2，改变动态事件中的CSS样式
innerText写入的是字符串无法改变样式，.inner HTML可以改变样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="点我试试" onclick="doWrite();"/> <div id="hello" style="display: inline;"> </div> </body> </html> <script type="text/javascript"> function doWrite(){ // alert("hello world"); //1找到对应的div ele=document.getElementById("hello"); //2使用innerText向div中写入字符串 ele.innerText="hello woshi <span style='color: red;font-size: 20px;'>lushuang</span>"; // 使用innerText向div中写入样式，通过JS可以动态改变CSS样式 ele.innerHTML="hello woshi <span style='color: red;font-size: 20px;'>lushuang</span>" } </script>
2.1练习--登录功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 用户名：<input id="username" type="text" size="12" /><br /> 密码：<input id="pwd" type="password" size="12" /><br /> <input type="button" value="登录" onclick="doLogin()"/> <input type="button" value="重置" onclick="doReset()"/> <div id="msg"></div> </body> </html> <script> function doLogin(){ //1获取用户名和密码的文本框的值，并且保存在相应的变量中 // .value是获得文本框或者文本域的值 name=document.getElementById("username").value; password=document.getElementById("pwd").value; //2通过条件判断用户和密码是否匹配 if(name=="陆双"&&password=="618618"){ //3输入正确，改变div内容 document.getElementById("msg").innerHTML="<span style='color: red;font-size: 30px;'>我还没有进入主页的功能，被骗了哈哈哈</span>"; ducument.write("用户登陆成功"); }else{ //4输入错误就弹出对话框提示 alert("用户名或者密码错误"); } } function doReset(){ //先找文本框,改变值，设置为null就是重置 document.getElementById("pwd").value=null; document.getElementById("username").value=null; } </script>
2.2练习-简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input id="num1" type="text" size="4" /> + <input id="num2" type="text" size="4" /> = <span id="sum">计算结果</span> <br /> <input type="button" value="计算" onclick="jisuan()" /> </body> </html> <script> function jisuan(){ //获取元素，拿值，判断，输出 a=parseInt(document.getElementById("num1").value)+parseInt(document.getElementById("num2").value); document.getElementById("sum").innerHTML=a; } </script>
2.3练习-信息注册页面，检验输入是否合法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>用户注册</h2> 用户名<input id="name" type="text" size="12" /><br /> 密码<input id="pwd1" type="password" size="12" onblur="check_pwd();"/><span id="pwd1_text">*密码一定是六位的</span><br /> 确认密码<input id="pwd2" type="password" size="12" onblur="check_same();"/><span id="pwd2_text">*两次输入密码不统一</span><br /> 邮箱<input id="email" type="text" size="12" onblur="check_email();" /><span id="email_text">*邮箱账号必须是合法的</span><br /> <input type="button" value="注册" onclick="zhuce();" /> </body> </html> <script> function check_pwd(){ pwd=parseInt(document.getElementById("pwd1").value.length); if(pwd!=6){ document.getElementById("pwd1_text").innerHTML="<span style='color: red;'>*密码一定是六位的</span>"; } else{ document.getElementById("pwd1_text").innerHTML="<span style='color: black;'>*密码一定是六位的</span>"; } } function check_same(){ pwd1=parseInt(document.getElementById("pwd1").value); pwd2=parseInt(document.getElementById("pwd2").value); if(pwd1!=pwd2){ document.getElementById("pwd2_text").innerHTML="<span style='color: red;'>*两次输入密码需要统一</span>"; }else{ document.getElementById("pwd2_text").innerHTML="<span style='color: black;'>*两次输入密码需要统一</span>"; } } function check_email(){ email=document.getElementById("email").value; i=email.indexOf("@"); if(i==-1){ document.getElementById("email_text").innerHTML="<span style='color: red;'>*邮箱账号必须是合法的</span>" }else{ document.getElementById("email_text").innerHTML="<span style='color: black;'>*邮箱账号必须是合法的</span>" } } function zhuce(){ name=document.getElementById("name").value; pwd=document.getElementById("pwd2").value; email=document.getElementById("email").value; alert("名字是"+name+";密码是"+pwd+";邮箱是"+email); document.getElementById("name").value=null; document.getElementById("pwd1").value=null; document.getElementById("pwd2").value=null; document.getElementById("email").value=null; } </script>
