HTML5CSS网页设计2023.3.16学习内容

最新推荐文章于 2024-08-16 20:24:29 发布

森森爱学习

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量64

点赞数

分类专栏：前端网页设计技术文章标签： css html5 学习 javascript

本文链接：https://blog.csdn.net/weixin_53214204/article/details/129602730

版权

前端网页设计技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了HTML5网页设计中JavaScript的使用，包括如何找到指定标签，处理onblur(失去焦点)和onfocus(获取焦点)事件。此外，还讲解了innerHTML与value属性的区别，特别是在输入框验证中的应用，例如检查输入是否为空或符合特定长度要求。

摘要由CSDN通过智能技术生成

HTML5网页设计-day04

每日一句:命运如同手中的掌纹，无论多曲折,终掌握在自己手种。

学习内容:js中如何找到指定标签、失去焦点和获取焦点事件、innterHTML和value

失去焦点和获取焦点事件

当我们移出或者点击输入框的时候，触发失去焦点和获取焦点

 <script>
        // onblur()失去焦点事件
        // onfocus()获取焦点事件
        function sj(){

        }
        function hj(){
            
        }
</script>
<body>
    <input type="text" id="i1" onblur="sj()" onfocus="hj()">
</body>

innterHTML和value

innterHTML是获取承兑的标签中的内容
value是获取输入框中的内容
特列: 是属于输入框

<script>
        function dj(){
            var input = document.getElementById("input1");
            var d1 = document.getElementById("d1");
            if(input.value == ""){
                d1.innerHTML = "<b>不能为空</b>";
            }else if(input.value.length > 6 && input.value.length < 20){
                d1.innerHTML = "<b style='color:blue'>通过!</b>";
            }else{
                d1.innerHTML = "<b style='color:red;'>密码输入有误</b>";
            }
        }
</script>
<body>
    用户名:<input type="text" id="input1" style="display: inline;">
    <input type="button" value="登录" onclick="dj()">     
    <div id="d1" style="display: inline;">*</div>
</body>