今日日常分享案例

最新推荐文章于 2024-09-24 15:55:35 发布

Collapsing World

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量69

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_64926847/article/details/133094000

版权

1.QQ延迟提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        .box2{
            position: absolute;
            left: 200px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #00f;
            display: none;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<script>
var box1 = document.querySelector('.box1')
var box2 = document.querySelector('.box2')

box1.onmouseover = function() {
    setTimeout(function() {
        box2.style.display = 'block'
    }, 500)
}

var timer
box1.onmouseout = box2.onmouseout = function() {
    timer = setTimeout(function() {
        box2.style.display = 'none'
    }, 500)
}

box2.onmouseover = function() {
    box2.style.display = 'block'
    clearInterval(timer)
}

// box2.onmouseout = function() {
//     timer = setTimeout(function() {
//         box2.style.display = 'none'
//     }, 500)
// }
</script>
</html>

2.简易年历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        .box{
            width: 210px;
            margin:50px auto;
            padding:10px;
            background-color: #e2e2e2;
        }
        .box ul:after{
            content:'';
            display:block;
            clear:both;
        }
        .box ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .box ul li{
            float:left;
            width: 58px;
            height: 58px;
            border:1px solid #fff;
            color:#fff;
            background-color: #333;
            margin:5px;
        }
        .box ul li:hover{
            cursor: pointer;
        }
        .box ul li h2,.box ul li p{
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .box ul li h2{
            font-size: 18px;
            line-height: 30px;
        }
        .box ul li p{
            font-size: 14px;
        }
        .box>.active{
            background-color: #f1f1f1;
            padding:10px;
            margin:5px 5px 0;
        }
        .box>.active h3,.box>.active p{
            padding: 0;
            margin: 0;
        }
        .box>.active h3{
            font-size: 14px;
            color:#666;
        }
        .box>.active p{
            font-size: 12px;
            line-height: 30px;
        }
        .box ul li.active{
            border-color:#333;
            background-color: #fff;
            color:hotpink;
        }
    </style>
    <div class="box">
        <ul>
            <li class="active">
                <h2>1</h2>
                <p>一月</p>
            </li>
            <li>
                <h2>2</h2>
                <p>二月</p>
            </li>
            <li>
                <h2>3</h2>
                <p>三月</p>
            </li>
            <li>
                <h2>4</h2>
                <p>四月</p>
            </li>
            <li>
                <h2>5</h2>
                <p>五月</p>
            </li>
            <li>
                <h2>6</h2>
                <p>六月</p>
            </li>
            <li>
                <h2>7</h2>
                <p>七月</p>
            </li>
            <li>
                <h2>8</h2>
                <p>八月</p>
            </li>
            <li>
                <h2>9</h2>
                <p>九月</p>
            </li>
            <li>
                <h2>10</h2>
                <p>十月</p>
            </li>
            <li>
                <h2>11</h2>
                <p>十一月</p>
            </li>
            <li>
                <h2>12</h2>
                <p>十二月</p>
            </li>
        </ul>
        <div class="active">
            <h3>1月</h3>
            <p>元旦放假，新年快乐！</p>
        </div>
    </div>
</body>
<script>
var arr = [
    {
        title:"1月",
        content:"元旦放假，新年快乐！"
    },
    {
        title:"2月",
        content:"没有情人的情人节怎么过？"
    },
    {
        title:"3月",
        content:"妇女节快乐！男人的节日在哪里？"
    },
    {
        title:"4月",
        content:"愚人节快乐！小心诈骗！"
    },
    {
        title:"5月",
        content:"五一小长假，去哪玩？"
    },
    {
        title:"6月",
        content:"祝自己儿童节快乐！"
    },
    {
        title:"7月",
        content:"建党节，庆祝祖国建党周年！"
    },
    {
        title:"8月",
        content:"建军节，愿祖国的军队更强大！"
    },
    {
        title:"9月",
        content:"教师节快乐，老师您辛苦了！"
    },
    {
        title:"10月",
        content:"国庆长假，回家看看！"
    },
    {
        title:"11月",
        content:"光棍节，你剁手了吗？"
    },
    {
        title:"12月",
        content:"圣诞节快乐，平安夜平安！"
    },
];
// 获取所有要移入的li
var lis = document.querySelectorAll('.box ul li')
// 遍历添加移入事件
for (var a = 0; a < lis.length; a++) {
    (function(a) {
        // lis[a]就是每一个li
            lis[a].onmouseover = function() {
                // 将所有li的类名删掉
                for (var b = 0; b < lis.length; b++) {
                    lis[b].className = ''
                }
                // 给当前li添加类名
                this.className = 'active'
                // 找到自己的下标
                // console.log(a);
                var obj = arr[a]
                // console.log(obj);
                document.querySelector('.box div.active h3').innerText = obj.title
                document.querySelector('.box div.active p').innerText = obj.content
            }
    })(a)
}
</script>
</html>

3.简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="text" class="num1">
<select name="fuhao">
    <option value="">请选择一个符号</option>
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" class="num2">
<button>=</button>
<div></div>
</body>
<script>
// 获取按钮
var btn = document.querySelector('button')
// 获取下拉框
var select = document.querySelector('[name="fuhao"]')
// 获取文本框
var num1 = document.querySelector('.num1')
var num2 = document.querySelector('.num2')
// 添加点击事件
btn.onclick = function() {
    // 获取符号 - 下拉框被选中的option的value，使用 select标签.value
    // console.log(select.value);
    // 如果下拉框的option没有设置value，获取到的就是option的innerText
    switch(select.value) {
        case '+':
            var result = Number(num1.value) + Number(num2.value)
        break
        case '-':
            var result = Number(num1.value) - Number(num2.value)
        break
        case '*':
            var result = Number(num1.value) * Number(num2.value)
        break
        case '/':
            var result = Number(num1.value) / Number(num2.value)
        break
    }
    // 将结果放在div中
    document.querySelector('div').innerText = result
}
</script>
</html>

4.改变诗的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<select name="color">
    <option value="">选择颜色</option>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
</select>
<div>
    爱斯达克就返回拉跨界石导航放
</div>
</body>
<script>
var select = document.querySelector('select')
select.onchange = function() { // 当下拉框的选项发生改变会触发执行
    // console.log(this.value);
    document.querySelector('div').style.color = this.value
}
</script>
</html>