实现一些小功能

最新推荐文章于 2023-07-24 12:20:11 发布

weixin_43700362

最新推荐文章于 2023-07-24 12:20:11 发布

阅读量99

点赞数

文章标签：简单的小功能

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103318475

版权

控制div的属性：

可以变化div的宽高，颜色，隐藏等。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .big{
        width:300px;
        height:310px;
        margin:80px auto;
        text-align: center;
    }
    .box{
        width:300px;
        height:300px;
        background: skyblue;
        margin-top:10px;
    }
</style>
<body>
<div class="big">
<button> 变宽 </button>
<button> 变高 </button>
<button> 变色</button>
<button>隐藏</button>
<button> 重置 </button>

<div class="box"> </div>
</div>

<script>
    var box = document.getElementsByClassName("box")[0];
    var btn0 = document.getElementsByTagName("button")[0];
    var btn1 = document.getElementsByTagName("button")[1];
    var btn2 = document.getElementsByTagName("button")[2];
    var btn3 = document.getElementsByTagName("button")[3];
    var btn4 = document.getElementsByTagName("button")[4];

    btn0.onclick = function(){
        box.style.width = "500px";
    }
    btn1.onclick = function(){
        box.style.height = "500px";
    }

    btn2.onclick = function(){
        box.style.background = "pink";
    }

    btn3.onclick = function(){
        box.style.display = "none";
    }

    btn4.onclick = function(){
        box.style.width = "300px";
        box.style.height= "300px";
        box.style.background = "skyblue";
        box.style.display = "block";
    }
</script>
</body>
</html>

运行结果：

在这里插入图片描述

输出输入框的内容

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .big{
        width:200px;
        height:200px;
        margin:20px auto;
    }
</style>
<body>
<div class="big">
    <input type="text" value = "北京市">
    <input type="text" value = "朝阳区">
    <button> 弹出参数 </button>
</div>

<script>
    var in1 = document.getElementsByTagName("input")[0];
    var in2 = document.getElementsByTagName("input")[1];
    var btn = document.getElementsByTagName("button")[0];

    btn.onclick = function(){
        alert(in1.value);
        alert(in2.value);
    }
</script>

</body>
</html>

运行结果：

最初的状态：
在这里插入图片描述
自己输入：

点击按钮，会弹出输入框的内容：

改变div的颜色

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .big{
        width:400px;
        height:300px;
        margin:30px auto;
        text-align: center;
        /*border:1px solid red;*/
    }
    .big div{
        float: left;
        display: inline-block;
        background: yellow;
        width:100px;
        height:100px;
        margin-right:20px;
    }
    button{
        margin-top:30px;
    }
</style>
<body>
<div class="big">
<div> </div>
<div> </div>
<div> </div>
<button>点击把div都变色</button>
</div>

<script>
//    需要注意，getElementsByClassName，getElementsByTagName等复数形式的时候，需要第几个，记得写下标。
//    如果都需要的话，不需要写下标
    var big = document.getElementsByClassName("big")[0];
    var divs = big.getElementsByTagName("div");
    var btn = document.getElementsByTagName("button")[0];

    btn.onclick = function(){
        for(var i = 0; i<divs.length;i++){
            divs[i].style.background = "blue";
        }
    }

</script>

</body>
</html>

运行结果：

最初状态：
在这里插入图片描述
点击变色后：

鼠标移入移出div会改变样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width:200px;
        height:200px;
        background: purple;
        margin:30px auto;
        color: #ffffff;
       border : 5px solid purple;
    }
</style>
<body>
<div>鼠标移入改变样式，鼠标移出恢复 </div>
<script>
    var d = document.getElementsByTagName("div")[0];
    d.onmouseenter = function(){
        d.style.border = "5px solid red";
        d. style.background = "gray";
        d. style.cursor = "pointer";
    }
    d.onmouseout = function(){
        d.style.border = "5px solid purple  ";
        d. style.background = "purple ";

    }
</script>


</body>
</html>