复选框

var j_cbAll = document.getElementById('j_cbAll');
var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');
j_cbAll.onclick = function () {
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].checked = this.checked;
    }
}
for (var i = 0; i < j_tbs.length; i++) {
    j_tbs[i].onclick = function () {
        var flag = true;
        for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
                flag = false;
                break;
            }
        }
    }
}

Tab栏切换

var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
    lis[i].setAttribute('index', i);
    lis[i].onclick = function () {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        this.className = 'current';
        var index = this.getAttribute('index');
        for (var i = 0; i < items.length; i++) {
            items[i].style.display = 'none';
        }
        items[index].style.display = 'block';
    }
}

密码显示/隐藏

eye.onclick = function () {
    if (flag == 0) {
        pwd.type = 'text';
        eye.src = 'open.png';
        flag = 1;
    } else {
        pwd.type = 'password';
        eye.src = 'clase.png';
        flag = 0;
    }
}

留言板

var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function () {
    if (text.value == '') {
        alert('请先输入内容')
    } else {
        var li = document.createElement('li');
        li.innerHTML = text.value
        ul.insertBefore(li, ul.children[0])
    }
}

动态获取数据

var datas = [
    {
        name: '张三',
        subjuct: 'java',
        score: 100
    },
    {
        name: '李四',
        subjuct: 'java',
        score: 100
    },
    {
        name: '王五',
        subjuct: 'java',
        score: 100
    }
]
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
    var tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (var k in datas[i]) {

        var td = document.createElement('td');
        td.innerHTML = datas[i][k];
        tr.appendChild(td);
    }
    var td = document.createElement('td');

    tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
    as[i].onclick = function () {
        tbody.removeChild(this.parentNode.parentNode);

    }
}

图片跟随鼠标移动

var div = document.querySelector('div');
document.addEventListener('mousemove', function (e) {
    var x = e.pageX;
    var y = e.pageY;
    div.style.left = x-10+'px';
    div.style.top = y-10+'px';
});

键盘按下s 搜索框获得焦点

var search = document.querySelector('input')
document.addEventListener('keyup', function (e) {
    if (e.keyCode == 83) {
        search.focus();
    }
})

输入内容 上面显示大字体内容

var con = document.querySelector('.con');
var jd = document.querySelector('.jd');
jd.addEventListener('keyup', function () {
    if (this.value == '') {
        con.style.display = 'none';
    } else {
        con.style.display = 'block';
        con.innerHTML = this.value;
    }
})
jd.addEventListener('blur', function () {
    con.style.display = 'none';
})
jd.addEventListener('focus', function () {
    if (this.value !== '') {
        con.style.display = 'block';
    }
})

未来距离现在的时间

function countDown(time) {
    var nowTime = +new Date();
    var inputTime = +new Date(time);
    var times = (inputTime - nowTime) / 1000;
    var d = parseInt(times / 60 / 60 / 24);
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2023-5-1 18:00:00'));

倒计时案例

var inputTime = +new Date('2021-11-15 12:00:00');
countDown()
setInterval(countDown, 1000)
function countDown() {
    var nowTime = +new Date();
    var times = (inputTime - nowTime) / 1000;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    hour.innerHTML = h;
    var m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m;
    minute.innerHTML = m;
    var s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s;
    second.innerHTML = s;
}

点击开始停止计时器

var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null
begin.addEventListener('click', function () {
    timer = setInterval(function () {
        console.log('今天你开心吗？');
    }, 500)
})
stop.addEventListener('click', function () {
    clearInterval(timer)
})

发送短信案例

var btn = document.querySelector('button');
var time = 3;
btn.addEventListener('click', function () {
    this.disabled = true;
    var timer = setInterval(function () {
        if (time == 0) {
            clearInterval(timer)
            btn.disabled = false;
            btn.innerHTML = '发送';
            time = 3;
        } else {
            btn.innerHTML = '还剩下' + time + '秒'
            time--;
        }
    }, 1000)
})

点击后跳转页面

btn.addEventListener('click', function () {
    var num = setInterval(function () {
        if (timer == 0) {
            location.href = 'http://www.baidu.com';
        } else {
            div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
            timer--;
        }
    }, 1000)
})

点击返回顶部模块

        // 获取中间的模块
        var allDown = document.querySelector('#variety');      //中间的模块
        var now = document.querySelector('#now');              //最上的模块
        var bodyEle = document.body;                           //获取body

        window.onscroll = function () {
            if (document.documentElement.scrollTop >= 250) {
                variety.style.display = "none";
                now.style.display = "block";
            } else {
                variety.style.display = "block";
                now.style.display = "none";
            }
        }

鼠标移动模块

var div = document.querySelector('.div');
div.addEventListener('mousedown', function (e) {
    var x = e.pageX - div.offsetLeft;
    var y = e.pageY - div.offsetTop;
    document.addEventListener('mousemove', move);
    function move(e) {
        div.style.left = e.pageX - x + 'px';
        div.style.top = e.pageY - y + 'px';
    }
    document.addEventListener('mouseup',function() {
        document.removeEventListener('mousemove',move)
    })
})

京东方法图片效果

var big = document.querySelector('.big');
var move = document.querySelector('.move');
var img = document.querySelector('.img');
big.addEventListener('mouseover', function () {
    move.style.display = 'block';
    img.style.display = 'block';
})
big.addEventListener('mouseout', function () {
    move.style.display = 'none';
    img.style.display = 'none';
})
big.addEventListener('mousemove', function (e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var setx = x - move.offsetWidth / 2;
    var sety = y - move.offsetHeight / 2;
    if (setx <= 0) {
        setx = 0;
    } else if (setx >= big.offsetWidth - move.offsetWidth) {
        setx = big.offsetWidth - move.offsetWidth;
    }
    if (sety <= 0) {
        sety = 0;
    } else if (sety >= big.offsetHeight - move.offsetHeight) {
        sety = big.offsetHeight - move.offsetHeight;
    }
    move.style.left = setx + 'px';
    move.style.top = sety + 'px';
})

animate动画函数

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15)
}

鼠标点击置顶

var allDown = document.querySelector('.all');
var end = document.querySelector('.end');
var return1 = document.querySelector('.return1');
window.onscroll = function () {
    if (document.documentElement.scrollTop >= 300) {
        allDown.classList.add('fixed');
        end.style.display = 'none'
        return1.style.display = 'block';
    } else {
        allDown.classList.remove('fixed');
        end.style.display = 'block'
        return1.style.display = 'none';
    }
}
return1.onclick = function () {
   //document.documentElement.scrollTop = 0;
    window.scroll(0,0)
}

鼠标点击置顶慢慢滑动到顶部

var flyTopp = document.querySelector('.fly-yellow-top');
flyTopp.addEventListener('click', function () {
    animate(window, 0)
});
function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            clearInterval(obj.timer)
            callback && callback();
        }
        window.scroll(0, window.pageYOffset + step)
    }, 15)
}

数组新增方法动态展示数据

var tbody = document.querySelector('tbody');
date.forEach(function (value) {
    var tr = document.createComment('tr');
    tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
    tbody.appendChild(tr);
})

根据价格查询商品 显示价格区间的商品

var btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
    var newDate = date.filter(function (value) {
        return value.price >= start.value && value.price <= end.value;
    });
    setDate();
});
setDate()
function setDate(mydate) {
tbody.innerHTML='';
mydate.forEach(function (value) {
var tr = document.createComment('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
tbody.appendChild(tr);
    });
}

点击搜索显示匹配的名称

search.addEventListener('click', function () {
    var arr = [];
    date.some(function (value) {
        if (value.pname === product.value) {
            arr.push(value);
            return true;
        }
    });
    setDate(arr);
})

筋斗云案例

var current = 0;
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListenter('mouseenter', function () {
        animate(cloud, this.offsetLeft);
    });
    lis[i].addEventListenter('mouseleave', function () {
        animate(cloud, current);
    });
    lis[i].addEventListenter('click', function () {
        current = this.offsetLeft;
    });
}

腾讯地图

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        var ipt=document.querySelector("#search")
        var btn=document.querySelector("#search_btn")
        var ul=document.querySelector("#ul")
        var sort=document.querySelector(".sort")
        var str=''
        var lng=113.625368
        var lat=34.746599
        var markerLayer;
        var center = new TMap.LatLng(34.746599, 113.625368);
        //初始化地图
        var map = new TMap.Map("container", {
            rotation: 20,//设置地图旋转角度
            pitch: 30, //设置俯仰角度（0~45）
            zoom: 12,//设置地图缩放级别
            center: center//设置地图中心点坐标
        });


        // 获取坐标附近的分类信息
        sort.onclick=function() {
            console.log(event.target.innerHTML)
            markerLayer.setGeometries([])
            fetch("https://apis.map.qq.com/ws/place/v1/search?keyword="+event.target.innerHTML+"&boundary=nearby("+lat+","+lng+",1000,1)&key=UJNBZ-7SDW6-4ZBSA-EQWEO-7GUZ7-NCBPM").then(function(res) {
                return res.json()
            }).then(function(res1) {
                console.log(res1.data)
                for(var i=0; i<res1.data.length; i++) {
                    markerLayer.add([{
                        "id": i+2,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                        "styleId": 'myStyle',  //指定样式id
                        "position": new TMap.LatLng(res1.data[i].location.lat, res1.data[i].location.lng),  //点标记坐标位置
                        "properties": {//自定义属性
                            "title": res1.data[i].title
                            }
                        }
                    ])

                }
            }).catch(function(err) {
                console.log(err)
            })
        }


        // 实时检索input输入框输入的内容
        ipt.oninput=function() {

            $.ajax({
                // 接口地址
                url: "https://apis.map.qq.com/ws/place/v1/suggestion?keyword="+ event.target.value +"&key=UJNBZ-7SDW6-4ZBSA-EQWEO-7GUZ7-NCBPM",   // 地点输入提示
                // 传递给后台字段参数
                // data: {
                //     query: event.target.value,
                //     region: '郑州',
                //     city_limit: true,
                //     ak: 'uvrdtOgZGXr7Q9aXBuWqz6DGxG4FmDQD'
                // },
                // 后台接口请求方法
                method: "GET",
                // 成功回调
                success: function(res) {
                    console.log(8888,res)
                    str=""
                    for(var i=0; i<res.data.length; i++) {
                        str+=`
                            <li data-lat='${res.data[i].location.lat}'  data-lng='${res.data[i].location.lng}'>${res.data[i].title}</li>
                        `
                    }
                    ul.innerHTML=str
                    ul.style.display="block"
                },
                // 失败回调
                fail: function(err) {
                    console.log(err)
                }
            })
        }
        ul.onclick=function() {
            ul.style.display="none"
            console.log(event.target.dataset.lat,event.target.dataset.lng)
            ipt.value=event.target.innerHTML
            //修改地图中心点
            lat=event.target.dataset.lat
            lng=event.target.dataset.lng
            map.setCenter(new TMap.LatLng(event.target.dataset.lat,event.target.dataset.lng));



            //创建并初始化MultiMarker
            markerLayer = new TMap.MultiMarker({
                map: map,  //指定地图容器
                //样式定义
                styles: {
                    //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                    "myStyle": new TMap.MarkerStyle({ 
                        "width": 25,  // 点标记样式宽度（像素）
                        "height": 25, // 点标记样式高度（像素）
                        "src": './1.png',  //图片路径
                        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                        "anchor": { x: 16, y: 32 }  
                    }) 
                },
                //点标记数据数组
                geometries: [{
                    "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    "styleId": 'myStyle',  //指定样式id
                    "position": new TMap.LatLng(event.target.dataset.lat,event.target.dataset.lng),  //点标记坐标位置
                    "properties": {//自定义属性
                        "title": event.target.innerHTML
                    }
                }]
            });

            // var val=document.querySelector("#search").value
            // console.log(val)
            // 清除所有的标注
            // map.clearOverlays()
            // console.log(event.target.dataset.lng, event.target.dataset.lat)
            // lng=event.target.dataset.lng
            // lat=event.target.dataset.lat
            // var point = new BMapGL.Point(event.target.dataset.lng, event.target.dataset.lat);
            // var myIcon = new BMapGL.Icon("http://127.0.0.1:8081/t/js/1.png", new BMapGL.Size(40, 40), {   
            //     // 指定定位位置。  
            //     // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
            //     // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
            //     // 图标中央下端的尖角位置。   
            //     anchor: new BMapGL.Size(0, 0),   
            //     // 设置图片偏移。  
            //     // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
            //     // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
            //     imageOffset: new BMapGL.Size(0, 0)   // 设置图片偏移   
            // });     
            //     // 创建标注对象并添加到地图  
            // var marker = new BMapGL.Marker(point, {icon: myIcon});         // 创建标注   

            // map.addOverlay(marker); 
            // // 创建点坐标 
            // map.centerAndZoom(point, 15);
        }


    </script>

正则表达式登录

    <script>
        // 获取正确错误模块
        var correct = document.querySelectorAll('.correct');
        var mistake = document.querySelectorAll('.mistake');
        var inputs = document.querySelectorAll('input');
        for (var i = 0; i < inputs.length; i++) {
            // 获得焦点后
            inputs[i].onfocus = function () {
                this.style.border = '1px solid #2e58ff';
            }
        }
        // 用户名判断
        // 用户名失去焦点后
        inputs[0].oninput = function () {
            // 验证用户名是否正确
            var userCondition = /^[a-zA-Z&%(+)*-][0-9a-zA-Z&%(+)*-]{5,17}$/;
            var userContent = document.querySelector('#user').value;
            if (userCondition.test(userContent)) {
                correct[0].style.display = 'block';
                mistake[0].style.display = 'none';
            } else {
                correct[0].style.display = 'none';
                mistake[0].style.display = 'block';
            }
            this.style.border = '1px solid #e0e0e0';
        }
        // 密码框失去焦点后验证密码是否正确
        inputs[1].oninput = function () {
            var userPassword = /^[0-9a-zA-Z]{6,10}$/;
            passwordContent = document.querySelector('#paw').value;
            if (userPassword.test(passwordContent)) {
                correct[1].style.display = 'block';
                mistake[1].style.display = 'none';
            } else {
                correct[1].style.display = 'none';
                mistake[1].style.display = 'block';
            }
            this.style.border = '1px solid #e0e0e0';
        }
        // 验证确认密码是否正确
        inputs[2].oninput = function () {
            var userPassword2 = /^[0-9a-zA-Z]{6,10}$/;
            passwordContent2 = document.querySelector('#paw-again').value;
            if (passwordContent2 == passwordContent) {
                correct[2].style.display = 'block';
                mistake[2].style.display = 'none';
            } else {
                correct[2].style.display = 'none';
                mistake[2].style.display = 'block';
            }
            this.style.border = '1px solid #e0e0e0';
        }
        // 验证手机号否正确
        inputs[3].oninput = function () {
            var number = /^[1][5|8][8|6][0-9]{8}$/;
            var phoneNumber = document.querySelector('#phone-number').value;
            if (number.test(phoneNumber)) {
                correct[3].style.display = 'block';
                mistake[3].style.display = 'none';
            } else {
                correct[3].style.display = 'none';
                mistake[3].style.display = 'block';
            }
            this.style.border = '1px solid #e0e0e0';
        }
        // 验证邮箱否正确
        inputs[4].oninput = function () {
            var email = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/;
            var emailEnter = document.querySelector('#email').value;
            if (email.test(emailEnter)) {
                correct[4].style.display = 'block';
                mistake[4].style.display = 'none';
            } else {
                correct[4].style.display = 'none';
                mistake[4].style.display = 'block';
            }
            this.style.border = '1px solid #e0e0e0';
        }
        // 点击注册事件
        var btn = document.querySelector('.btn');
        btn.onclick = function () {
            var user = document.querySelector('#user').value;
            var paw = document.querySelector('#paw').value;
            var userCondition = /^[a-zA-Z&%(+)*-][0-9a-zA-Z&%(+)*-]{5,17}$/;
            var userContent = document.querySelector('#user').value;
            var userPassword = /^[0-9a-zA-Z]{6,10}$/;
            var passwordContent = document.querySelector('#paw').value;
            var userPassword2 = /^[0-9a-zA-Z]{6,10}$/;
            var passwordContent2 = document.querySelector('#paw-again').value;
            var number = /^[1][5|8][8|6][0-9]{8}$/;
            var phoneNumber = document.querySelector('#phone-number').value;
            var email = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/;
            var emailEnter = document.querySelector('#email').value;
            if (email.test(emailEnter) && number.test(phoneNumber) && (passwordContent2 == passwordContent) && userCondition.test(userContent) && userPassword.test(passwordContent)) {
                alert('恭喜你注册成功！')
                localStorage.setItem("user", user)
                localStorage.setItem("password", paw)
                location.href = 'login.html';
            } else {
                alert('请检查您输入的信息是否有误！')
            }
        }
    </script>


//登录页面
<script>
    var user = document.querySelector('#user');
    var paw = document.querySelector('#paw');
    user.value = localStorage.getItem("user");
    paw.value = localStorage.getItem("password");
</script>