JS，CSS联动

2021-09-05 11:34:32 阅读：153 来源： 互联网

标签：function value JS getElementById innerHTML 联动 document email 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>

标签：function,value,JS,getElementById,innerHTML,联动,document,email,CSS
来源： https://www.cnblogs.com/lumc5/p/15228662.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS，CSS联动