JS——经典案例

Southern Wind

已于 2022-09-09 12:05:22 修改

阅读量986

点赞数 4

分类专栏： html+css JavaScript 文章标签： javascript 前端 html

于 2022-09-09 11:41:45 首次发布

本文链接：https://blog.csdn.net/nanchen_J/article/details/126779987

版权

JavaScript 同时被 2 个专栏收录

49 篇文章 3 订阅

订阅专栏

html+css

37 篇文章 3 订阅

订阅专栏

本文展示了四个网页交互设计的实例，包括点击有惊喜效果、模态框实现、模拟对话框以及建议留言板的制作。通过这些案例，读者可以了解到如何使用HTML、CSS和JavaScript来提升网页的互动性和用户体验。此外，还提供了一个选项卡案例，展示了如何创建具有导航功能的选项卡组件。

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

一、点击有惊喜案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击有惊喜呦</title>
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        #surprised{
            width:400px;
            height: 200px;

            font-size: 30px;
            text-align: center;
            line-height: 200px;
            cursor: pointer;
            margin: 20px auto;
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="surprised">
        点击有惊喜呦！！！
    </div>
</body>
<script type="text/javascript">
    var oDiv = document.getElementById('surprised');
    var clickTimer = 0;
    oDiv.onclick = function () {
        switch(clickTimer % 4){
            case 1:
                this.style.backgroundColor = 'green'; //this在这里就是指当点击事件的对象oDiv
                this.innerText = '再次点击试试';
                break;
            case 2:
                this.style.backgroundColor = 'orange';
                this.innerText = '哈哈，骗你的';
                break;
            case 3:
                this.style.backgroundColor = 'red';
                this.innerText = '真的没了！！！';
                break;
            default:
                this.style.backgroundColor = 'blue';
                this.innerText = '点击有惊喜呦！！！';
        }
        clickTimer++;
    }
</script>
</html>

二、模拟框案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        html,body{
            height: 100%;
        }
        #wrapper{
            width:100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
        }
        #p1{
            position: relative;
            top:150px;
            width:400px;
            height: 200px;


            text-align: center;
            line-height: 200px;

            margin:auto;
            background-color: white;
        }
        #span1{
            position: absolute;
            right: 0;
            top:0;

            width: 30px;
            height: 30px;

            font-size: 20px;
            line-height: 30px;
            text-align: center;

            color: #ffffff;
            background-color: red;

        }
    </style>
</head>
<body>

        <button id="btn">点我一下</button>
        <div id="wrapper">
            <div id="p1"></div>
            <div id="span"></div>
        </div>
        
        
</body>
<script type="text/javascript">
    /*思路：
    * 1.创建一个div盒子，设置好属性
    * 2.添加p标签和span标签，分别设置好位置，分别插入到div标签里
    * 3.定义button单击事件
    * */


    var oDiv = document.createElement('div'); //创建一个盒子
    var oP = document.createElement('p');
    var oSpan = document.createElement('span');
    var btn = document.getElementById('btn');
    var body = document.getElementsByTagName('body');

    // btn.onclick = function () {


    //     oP.innerText = 'This is True music';
    //     oSpan.innerText = 'X';

    //     oDiv.appendChild(oP);
    //     oP.appendChild(oSpan);

    //     oDiv.id = 'wrapper';
    //     oP.id = 'p1';
    //     oSpan.id = 'span1';

    //     body[0].insertBefore(oDiv,btn);
    // }

    // oSpan.onclick = function(){
    //     body[0].removeChild(oDiv);
    // }


</script>
</html>

三、模拟框实战

<!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>模拟框案例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            background-color: aliceblue;
            position: relative;
        }

        #div {
            width: 100%;
            height: 800px;
        }
        #div h1{
            text-align: center;
            font-size: 100px;
            font-weight: 100;
            color: #000;
            display: block;
        }
        #divs {
            width: 700px;
            height: 500px;
            background-color: beige;
            border-radius: 5px  ;
            box-shadow: 20px 30px 50px rgb(53, 53, 53);
            position: absolute;
            top: 20%;
            left: 30%;
            display: none;
        }
        #divs .divs1 {
            width: 300px;
            height: 400px;
            border: 1px solid black;
            margin: 30px auto;
            position: relative;
        }
        h3 {
            text-align: center;
        }
        .divs1 div {
            margin-top: 20px;
            margin-left: 7px;
        }
        input {
            outline: none;
        }
        a {
            display: inline-block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            background-color: thistle;
            border-radius: 25px;
            text-align: center;
            text-decoration: none;
            margin-left: 110px;
            margin-top: 50px;
            color: white;
        }
        a:hover {
            background-color: steelblue;
        }
        p {
            text-align: center;
            cursor: pointer;
            width: 30px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            right: -200px;
            top: -30px;
            background-color: tomato;
            font-size: 20px;
            color: #fff;
            display: none;
        }
    </style>
</head>
<body>
    <button>点击我弹出对话框</button>
    <div id="div"> <h1>欢迎来到注册页面</h1></div>
    <div id="divs">
       
        <div class="divs1">
            <h3>用户注册界面</h3>
            <div>
                请输入姓名：<input type="text" style="width: 100px;" placeholder="请输入你的名字">
            </div>
            <p>X</p>
            <div>
                请输入账号：<input type="text" name="" id="" maxlength="11" placeholder="请输入十一位的账号">
            </div>
            <div>
                请输入密码：<input type="password" name="" id="" maxlength="11" placeholder="请输入密码">
            </div>
            <div>
                请确认密码：<input type="password" name="" id="" maxlength="11" placeholder="请确认密码">
            </div>
            <a href="###">提交注册</a>
        </div>
    </div>
    <script>
        var p = document.querySelector('p');
        var h1 = document.querySelector('h1');
        var btn = document.querySelector('button');
        var div1 = document.querySelector('#div');
        var div2 = document.querySelector('#divs');
        btn.addEventListener('click', function () {
            div1.style.backgroundColor = 'gray';
            // btn.disabled = 'false';
            btn.innerHTML = '不可选中';
            btn.disabled = 'true';
            div2.style.display = 'block';
            p.style.display = 'block';
            h1.style.display='block';
            h1.innerHTML = '请注册';
            h1.style.color = '#fff';
        })
        p.addEventListener('click', function () {
            div2.style.display = 'none';
            p.style.display = 'none';
            div1.style.backgroundColor = 'aliceblue';
            btn.innerHTML = '点击我弹出注册页面';
            btn.disabled = '';
            h1.style.display = 'none';
            // h1.style.color = '#000';
        })
    </script>
</body>
</html>

四、制作建议留言板案例

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

<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style type="text/css">
    </style>

</head>
<body>
    <h1>简易留言板</h1>
    <div class="wrapper">
        <ul id="words"></ul>
    </div>
    <textarea id="msg"></textarea>
    <button id="btn1">留言</button>
    <button id="btn2" onclick="sum()">统计</button>
</body>
<script type="text/javascript">
    //ul 是用来存储留言记录
    var ul = document.getElementById('words');
    var msg = document.getElementById('msg');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var liCount = 0; //用来记录留言数目的
    btn1.onclick = function () {
        if (!msg.value) {
            alert('留言板里没有内容')
        } else {
            /*将留言插入顶部的具体方法
            *1.判断ul中有无元素，没有则使用append，有则使用insertbefore
            * 2.插入信息同时插入一个span标签，用来设置关闭按钮
            * */
            var li = document.createElement('li');
            li.innerHTML = msg.value + '&nbsp;&nbsp;<span>X</span>';
            if (liCount == 0) {
                ul.appendChild(li);
                liCount++;
            } else {
                ul.insertBefore(li, ul.childNodes[0]);
                liCount++;
            }
            msg.value = '';
        }
        oSpans = document.getElementsByTagName('span');
        for (var i = 0; i < oSpans.length; i++) {
            oSpans[i].onclick = function () {
                ul.removeChild(this.parentNode);
                liCount--;
            }
        }
    };
    function sum() {
        alert('一共有' + liCount + '条信息');
    }


</script>

</html>

五、选项卡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100%;
        }
        .wrapper{
            width: 600px;
            border: 1px solid red;
            margin: 30px auto;
        }
        ul{
            list-style: none;
            overflow: hidden;   /*注意要清除浮动*/
        }
        ul a{
            display: block;
            text-decoration: none;

            width:200px;
            height: 50px;

            text-align: center;
            line-height: 50px;

            color: black;
        }
        ul li{
            float: left;
            background-color: rgba(0,0,0,.3);
        }
        p{
            width: 600px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            display: none;
        }
        ul li.active{
            background-color: #ffffff;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li class="active"><a href="#" >首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">热卖</a></li>
        </ul>
        <p id="home" class="active">首页内容</p>
        <p id="news">新闻内容</p>
        <p id="hotPurchase">热卖内容</p>
    </div>
</body>
<script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    var ps = document.getElementsByTagName('p');
    for(var i = 0;i < lis.length;i++){
        lis[i].index = i;   //这个用来记录每个标签的遍历位置，不用this，这里this指代的应该是window
        lis[i].onclick = function () {
            /*思路
            * 1.清除所有标签上的active
            * 2.将单击的li和p标签都添加active属性
            * */
            //清空class
            for(var j = 0;j < lis.length;j++){
                lis[j].className = '';
                ps[j].className = '';
            }
            //注意：这有个坑，不能跳！！！不能用遍历的i，要用this下的属性index
            this.className = 'active';
            ps[this.index].className = 'active';
        }
    }
</script>
</html>