今日日常分享

最新推荐文章于 2024-10-16 11:23:07 发布

Collapsing World

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量128

点赞数

文章标签：前端 javascript 开发语言

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

版权

1.大纲

2.表格动态添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<table border="1" width="500" style="float:left;margin-left:200px;">
    <caption><h2>表格显示</h2></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<form action="http://baidu.com" style="float:right;margin-right: 200px;">
    <table>
        <caption><h2>表格添加</h2></caption>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="添加"></td>
        </tr>
    </table>
</form>
</body>
<script>
// 定义数组
var arr = []
var tbody = document.querySelector('tbody')
loadHTML()
function loadHTML() {
    // 根据数组渲染表格
    var html = ''
    arr.forEach(function(item) {
        html += '<tr>'
            for (var key in item) {
                html += '<td>'
                    html += item[key]
                html += '</td>'
            }
        html += '</tr>'
    })
    tbody.innerHTML = html
}

// 将表单内容点击添加的时候放在数组中
var nameIpt = document.querySelector('[name="name"]')
var ageIpt = document.querySelector('[name="age"]')
var genderIpts = document.querySelectorAll('[name="gender"]')
var form = document.querySelector('form')
form.addEventListener('submit', onsubmit)
// 事件侦听器绑定的事件函数中，return false没有阻止默认行为的功能
function onsubmit(e) {
    e.preventDefault()
    // console.log(nameIpt.value);
    // console.log(ageIpt.value);
    var name = nameIpt.value
    var age = ageIpt.value
    // 遍历每个单选框
    for (var a = 0; a < genderIpts.length; a++) {
        // 判断每个单选框的checked是否为真 - 判断单选框是否是选中的
        if (genderIpts[a].checked) {
            // 如果选中了，就获取他的value值
            var gender = genderIpts[a].value
        }
    }
    // console.log(name, age, gender);
    arr.push({
        "name": name,
        "age": age,
        gender: gender
    })
    loadHTML()
    nameIpt.value = ageIpt.value = ''
    for (var a = 0; a < genderIpts.length; a++) {
        // 将所有单选框都取消选中
        genderIpts[a].checked = false
    }
}
</script>
</html>

2.模拟下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{
            width: 201px;
            height: 30px;
            border: 1px solid #ccc;
            padding-left: 8px;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
            width: 199px;
            border: 1px solid #ccc;
            margin: 0;
            padding: 0;
            display: none;
        }
        ul li{
            padding-left: 8px;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请选择">
<ul>
    <li>Vue</li>
    <li>React</li>
    <li>Angular</li>
</ul>
</body>
<script>
/*
效果：
    一个输入框，下面有几个列表项
    当获取焦点的时候，让列表项显示；失去焦点的时候，列表项隐藏
    当点击列表的时候，让对应的内容放在输入框中
*/
var input = document.querySelector('input')
var ul = document.querySelector('ul')
input.addEventListener('focus', onfocus)
function onfocus() {
    ul.style.display = 'block'
}

input.addEventListener('blur', onblur)
function onblur() {
    // 一旦触发失去焦点事件让ul隐藏后，就无法触发ul的点击事件了，所以让失去焦点事件中隐藏ul的代码延迟一会执行
    setTimeout(function() {
        ul.style.display = 'none'
    }, 100)
}

// 用事件委托给ul添加点击事件，处理li的点击行为
ul.addEventListener('click', onclick)
function onclick(e) {
    var target = e.target
    if (target.tagName === 'LI') {
        // 将li的内容放在input中
        input.value = target.innerText
    }
}
</script>
</html>

3.鼠标位置实时显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
x： <span>0</span>
<br>
y： <span>0</span>
</body>
<script>
document.addEventListener('mousemove', onmousemove)
function onmousemove(e) {
    // 获取鼠标位置
    // var x = e.clientX
    // var y = e.clientY

    // var x = e.offsetX
    // var y = e.offsetY

    var x = e.pageX
    var y = e.pageY
    document.querySelector('span').innerText = x
    document.querySelector('span+br+span').innerText = y
}
</script>
</html>

4.自定义按键控制滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div style="width: 20px;">
    阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分
    阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分
    阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分
    阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分
    阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分阿萨德范户口阿克苏绝代风华哦亲围绕和那款是令肌肤很快就安守本分
</div>
</body>
<script>
document.addEventListener('keydown', onkeydown)
function onkeydown(e) {
    var keycode = e.keyCode
    var word = String.fromCharCode(keycode).toLowerCase()
    var t = document.documentElement.scrollTop || document.body.scrollTop
    if (word === 'a') {
        // 向上滚动
        t -= 20
    } else if (word === 'b') {
        // 向下滚动
        t += 20
    } else {
        // 阻止默认行为
        e.preventDefault()
    }
    document.documentElement.scrollTop = document.body.scrollTop = t
}
</script>
</html>

5.可拖拽进度条

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big {
            width: 300px;
            height: 30px;
            border: 1px solid;
        }

        .small {
            width: 0;
            height: 30px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div>
    <span>0</span>
</body>
<script>
    var big = document.querySelector('.big')
    var small = document.querySelector('.small')
    big.addEventListener('mousedown', onmousedown)
    function onmousedown(e) {
        var x = e.offsetX
        // 设置小div的宽度
        small.style.width = x + 'px'
        // 计算比例
        document.querySelector('span').innerText = Math.round(x / big.clientWidth * 100)

        // 给大div绑定移动事件
        big.addEventListener('mousemove', onmousemove)
    }

    function onmousemove(e) {
        var x = e.offsetX
        // 设置小div的宽度
        small.style.width = x + 'px'
        document.querySelector('span').innerText = Math.round(x / big.clientWidth * 100)
    }

    document.addEventListener('mouseup', onmouseup)
    function onmouseup() {
        big.removeEventListener('mousemove', onmousemove)
    }
</script>

</html>

6.指定范围内拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .big{
            width: 400px;
            height: 400px;
            border: 10px solid #00f;
            position: relative;
            margin: 50px auto;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="small"></div>
</div>
</body>
<script>
var big = document.querySelector('.big')
var small = document.querySelector('.small')
small.onmousedown = function(e) {
    var x1 = e.offsetX
    var y1 = e.offsetY
    big.onmousemove = function(e) {
        var x = e.pageX
        var y = e.pageY
        // var smallLeft = x - big.offsetLeft - big.clientLeft - small.offsetWidth / 2
        var smallLeft = x - big.offsetLeft - big.clientLeft - x1
        var smallTop = y - big.offsetTop - big.clientTop - y1
        if (smallLeft < 0) {
            smallLeft = 0
        }
        if (smallTop < 0) {
            smallTop = 0
        }
        if (smallLeft > big.clientWidth - small.offsetWidth) {
            smallLeft = big.clientWidth - small.offsetWidth
        }
        if (smallTop > big.clientHeight - small.offsetHeight) {
            smallTop = big.clientHeight - small.offsetHeight
        }

        small.style.left = smallLeft + 'px'
        small.style.top = smallTop + 'px'
    }
}

document.onmouseup = function() {
    big.onmousemove = null
}
</script>
</html>

7.表格动态添加——模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<table border="1" width="500" style="float:left;margin-left:200px;">
    <caption><h2>表格显示</h2></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<form action="http://baidu.com" style="float:right;margin-right: 200px;">
    <table>
        <caption><h2>表格添加</h2></caption>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="gender" value="男">男
                <input type="radio" name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="添加"></td>
        </tr>
    </table>
</form>
</body>
<script>
// 定义数组
var arr = []
var tbody = document.querySelector('tbody')
loadHTML()
function loadHTML() {
    // 根据数组渲染表格
    var html = ''
    arr.forEach(function(item) {
        html += `
            <tr>
                <td>${item.name}</td>    
                <td>${item.age}</td>    
                <td>${item.gender}</td>    
            </tr>
        `
    })
    tbody.innerHTML = html
}

// 将表单内容点击添加的时候放在数组中
var nameIpt = document.querySelector('[name="name"]')
var ageIpt = document.querySelector('[name="age"]')
var genderIpts = document.querySelectorAll('[name="gender"]')
var form = document.querySelector('form')
form.addEventListener('submit', onsubmit)
// 事件侦听器绑定的事件函数中，return false没有阻止默认行为的功能
function onsubmit(e) {
    e.preventDefault()
    // console.log(nameIpt.value);
    // console.log(ageIpt.value);
    var name = nameIpt.value
    var age = ageIpt.value
    // 遍历每个单选框
    for (var a = 0; a < genderIpts.length; a++) {
        // 判断每个单选框的checked是否为真 - 判断单选框是否是选中的
        if (genderIpts[a].checked) {
            // 如果选中了，就获取他的value值
            var gender = genderIpts[a].value
        }
    }
    // console.log(name, age, gender);
    arr.push({
        "name": name,
        "age": age,
        gender: gender
    })
    loadHTML()
    nameIpt.value = ageIpt.value = ''
    for (var a = 0; a < genderIpts.length; a++) {
        // 将所有单选框都取消选中
        genderIpts[a].checked = false
    }
}
</script>
</html>