zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    241. Different Ways to Add Parentheses java solutions
    89. Gray Code java solutions
    367. Valid Perfect Square java solutions
    46. Permutations java solutions
    116. Populating Next Right Pointers in Each Node java solutions
    153. Find Minimum in Rotated Sorted Array java solutions
    判断两颗树是否相同
    求二叉树叶子节点的个数
    求二叉树第k层的结点个数
    将二叉排序树转换成排序的双向链表
  • 原文地址:https://www.cnblogs.com/lumc5/p/15228662.html
Copyright © 2011-2022 走看看