• 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>
  • 相关阅读:
    如何使用ps技术批量操作图片???
    [2020.8.3]联想 K10(K10e70) Magisk ROOT 纯净无推广 一键刷机 K10e70_S206_170105
    [2020.8.3]联想 K6畅享版(L38082) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.9.226
    [2020.8.3]联想 K5S(L38031) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.9.188
    [2020.8.3]联想 K5(K350t) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.1.244
    [2020.8.3]联想 K5 Pro(L38041) Magisk ROOT 纯净无推广 一键刷机 ZUI_11.1.099
    [2020.8.3]联想 K5 Pro(L38041) Magisk ROOT 纯净无推广 一键刷机 ZUI_5.0.188
    [2020.8.3]联想 K5 Play(L38011) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.7.087
    [2020.8.3]联想 K5 Note(L38012) Magisk ROOT 纯净无推广 一键刷机 ZUI_3.9.269
    --- 测试
  • 原文地址:https://www.cnblogs.com/lumc5/p/15228662.html
Copyright © 2020-2023  润新知