DOM/BOM习题

这篇博客详细介绍了如何使用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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值