【Javascript】常用功能

最新推荐文章于 2022-03-15 14:50:44 发布

诗与浪子

最新推荐文章于 2022-03-15 14:50:44 发布

阅读量209

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_44647926/article/details/105738629

版权

Web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Bootstrap主题色

#f5f5f5 灰色
#dff0d8 绿色
#95d095 深绿色
#d9edf7 蓝色
#fcf8e3 黄色
#f2dede 红色
#AA6708 棕色

实时时间显示

function nowTime(obj) {
   setInterval(function () {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        if(hour<10){
            hour = '0' + hour;
        }
        if(minute<10){
            minute = '0' + minute;
        }
        if(second<10){
            second = '0' + second;
        }
        obj.innerHTML = hour + ':' + minute + ':' + second;
    },1000)
}

拖拽控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1 {
            height: 100px;
            width: 100px;
            background-color: deeppink;
            position: absolute;
        }
        #box2 {
            height: 100px;
            width: 100px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>

<script type="text/javascript">
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");

    function drag(obj) {
            obj.onmousedown = function (event) {
            //兼容IE浏览器 获取事件对象
            event = event || window.event;
            //兼容IE浏览器 对鼠标下一次按下行为进行捕获
            obj.setCapture && obj.setCapture();
            var offset_x = event.clientX - obj.offsetLeft;
            var offset_y = event.clientY - obj.offsetTop;
            //拖拽移动
            document.onmousemove = function (event){
            //兼容IE浏览器 获取事件对象
                event = event || window.event;
                var left = event.clientX;
                var top = event.clientY;
                obj.style.left = left - offset_x + "px";
                obj.style.top = top  - offset_y+ "px";
            };
            //拖拽松开
            document.onmouseup = function () {
                //销毁鼠标移动事件
                document.onmousemove = null;
                // 销毁事件鼠标按键松开事件
                document.onmouseup = null;
                //兼容IE浏览器 对鼠标下一次按下行为进行捕获
                obj.releaseCapture && obj.releaseCapture();
            };
            //适用于其他浏览器取消浏览器默认行为(此处为脱离全选行为)
            return false;
        }
    }
    drag(box1);
    drag(box2);
</script>
</body>
</html>