DOM/BOM习题

最新推荐文章于 2022-08-22 20:39:13 发布

努力的拾壹

最新推荐文章于 2022-08-22 20:39:13 发布

阅读量769

点赞数 1

本文链接：https://blog.csdn.net/weixin_45608986/article/details/119281090

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现前端交互功能。包括：（1）当输入框获取焦点且为空时显示提示信息；（2）失去焦点时，若为空则显示错误提示并改变边框颜色；（3）利用onchange事件根据下拉菜单选择改变div背景色及内容；（4）在文本域中限制输入字数，并实时显示剩余字数，超出字数时给出警告。

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

1.用onblur和onfocus这两个鼠标事件，根据效果图，补充代码，实现下列功能：
（1）当输入框获得焦点：
如果输入框值为空，提示“请输入您的姓名”
（2）当输入框失去焦点：
如果输入框值为空，提示“用户名不能为空”，并且边框颜色变为红色
如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色。

<style>
        .red{
         	border: 1px solid red;
        }
</style>
</head>
<body>
    姓名：<input type="text" name="" ><span style="display: none;">请输入你的姓名</span>
    <script>
        var name1 = document.getElementsByTagName("input")[0];
        var name2 = document.getElementsByTagName("span")[0];
        name1.onfocus=function(){
            name2.style.display = 'inline';
        }
        name1.onblur=function(){
            if(this.value == ""){
                name2.innerHTML = "用户名不能为空";
                this.className = "red";
            }else{
                name2.innerHTML = "";
                this.className="yellow";
            }
        }
    </script>
</body>

2.使用onchange事件实现下列功能：
（1）选择下拉列表中不同的选项，页面中的div就设置成不同的背景颜色，div中的内容也发生变化。比如：选择黄色选项，div的背景颜色就变为黄色，文本内容就变为“我的背景颜色变成了yellow色”
（2）当选择下拉列表中的“请选择”时，div的背景颜色变成白色，文本变为“我没有发生任何变化”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        	#div{
	    		width:300px;
	    		height:300px;
	    		border:2px solid gray;
	    		margin:100px  0  0 200px;
	    	}

       

    </style>
</head>
<body>
    <div>
        <span>请选择您喜欢的颜色:</span>
        <select id="color">
            <option value="0">请选择</option>
            <option value="yellow">黄色</option>
            <option value="orange">橘色</option>
            <option value="pink">粉色</option>
            <option value="purple">紫色</option>
        </select>
    </div>
    <div id="div">我是div</div>
    <script>
        var color = document.getElementById("color");
        var div = document.getElementById("div");
        color.onchange = function(){
            //检验点击选项是否能触发
            // console.log("ybq");
            // var bgcolor = this.value;
            console.log(bgcolor);
            if(bgcolor == 0){
                div.style.backgroundColor = "white";
            }
            else
            div.style.backgroundColor = bgcolor;
        }
    </script>
</body>
</html>

3.实现：
（1）在文本域中输入文本，文本域的字数限制在30个字以内。
（2）每当用户输入一个字，就要提示还能输入多少个字
（3）当用户输入的文本超出了30个字时，要提示用户超出了多少字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>字数限制在30字内，<span >您还可以输入<b id="io">30</b> 字</span></p>
    <textarea cols="50" rows="7" id="text"></textarea>
    <script>
        var kl = document.getElementById("io");

        var lp = document.getElementById("text");

        var po = document.getElementsByTagName("span")[0];

        var total = 30;

        document.onkeyup = function () {

            var o = lp.value.length;

            left = total - o;

            if (left >= 0) {

                kl.innerHTML = left;

            } else {

                kl.innerHTML = -left;

                po.innerHTML = "您已超出" + kl.innerHTML + "字";

            }

        }
    </script>
</body>

</html>

努力的拾壹

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM/BOM习题

1.用onblur和onfocus这两个鼠标事件，根据效果图，补充代码，实现下列功能：（1）当输入框获得焦点：如果输入框值为空，提示“请输入您的姓名”（2）当输入框失去焦点：如果输入框值为空，提示“用户名不能为空”，并且边框颜色变为红色如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色。<style> .red{ border: 1px solid red; }</style></head&g
复制链接

扫一扫

专栏目录