JS，CSS联动

2023-10-04 08:33:22

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>

码农公寓

相关文章