随机颜色、鼠标移动、活动倒计时例子

最新推荐文章于 2022-11-16 20:18:42 发布

@是静静啊

最新推荐文章于 2022-11-16 20:18:42 发布

阅读量131

点赞数

分类专栏：例题文章标签： javascript

本文链接：https://blog.csdn.net/m0_45272038/article/details/113961128

版权

例题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

1、随机修改字体大小和文字颜色

 /* 写一个定时器，没隔一秒修改一次字体大小和文字颜色，最开始字体默认大小，然后增大，当增大6 次以后字体开始缩小，缩小6次再增大 */
        function getRandColor() {
            return "rgba(" + getRand(0, 255) + "," + getRand(0, 255) + "," + getRand(0, 255) + "," + "1" + ")";
        }
        function getStyle(node,cssStyle){
            return node.currentStyle? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
        }
        /*  var val=getRandColor();
         console.log(val); */
            var oDiv = document.getElementById("div1");
            var speed=5;
            // console.log(oDiv);
            setInterval(function () {
                // console.log(1);
                oDiv.style.color = getRandColor();
                // oDiv.style.fontSize="30px";
                oDiv.style.fontSize=parseInt(getStyle(oDiv,"fontSize"))+speed+"px";
                if(parseInt(oDiv.style.fontSize)%6 === 0){
                    speed *= -1;
                }
            }, 1000)

2、跟随鼠标移动显示提示框

<style>
        a {
            font-size: 30px;
            color: cyan;
            margin-left: 50px;
        }

        div {
            width: 400px;
            height: 100px;
            background: lightgreen;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <a href="#">嘻嘻<br><br></a>
    <a href="#">哈哈<br><br></a>
    <a href="#">呵呵<br><br></a>
    <a href="#">嘿嘿<br><br></a>
    <a href="#">哼哼<br><br></a>
    <a href="#">唧唧<br><br></a>
    <div id="haha"></div>
    <script>
        var arr = ["啊哈是个猪，猪哥肉好吃，糖醋排骨，红烧猪蹄，红烧肉，都还可以", "猪头猪脑猪身猪尾巴，反正都是吃的，虽然我不吃这些哈哈", "每天都爱嘻嘻哈哈，然后被人宰了，吃完了", "哎哟写多了", "这可咋整呢", "就只能写完了咿咿呀呀哈哈嘻嘻叽哩哇啦"]
        var ha = document.getElementById("haha");
        var oA = document.querySelectorAll("a");

        for (var i = 0; i < arr.length; i++) {
            oA[i].index = i;
            oA[i].onmouseover = function () {
                ha.innerHTML=arr[this.index];
                ha.style.display = "block";
               
            }
            oA[i].onmouseout = function () {
                ha.style.display = "none";
            }
            oA[i].onmousemove = function (ev) {
                var e= ev || window.event;
                ha.style.left=e.clientX+10+"px";
                ha.style.top=e.clientY+10+"px";
            }
        }
    </script>

3、商品活动时间倒计时

<body>
    <h1 id="nowTime"></h1>
    <h1 id="time">距商品活动结束还剩x天x时x分x秒</h1>
    <script src="../tool.js"></script>
    <script>
        var nowTime = document.getElementById("nowTime");
        var time = document.getElementById("time");

        nowTime.innerHTML = getLocalDate(new Date());
        var timer = setInterval(function () {
            nowTime.innerHTML = getLocalDate();
        }, 1000);
        var startTime = new Date();
        var endTime = new Date("2020-10-21 09:25:00")
        var s = (endTime.getTime() - startTime.getTime()) / 1000;

        function haha() {

            if (s < 0) {
                time.innerHTML = "商品活动时间已结束！！！！";
                return;
            }

            var houre = s / 60 / 60;
            // console.log(houre);
            var d = parseInt(houre / 24);
            var h = parseInt((houre / 24 - d) * 24);
            var f = parseInt(((houre / 24 - d) * 24 - h) * 60);
            var m = parseInt((((houre / 24 - d) * 24 - h) * 60 - f) * 60);
            // console.log(d);
            time.innerHTML = "距商品活动结束还剩" + d + "天" + h + "时" + f + "分" + m + "秒";
        }
        haha();
        var timer = setInterval(function () {
            s--;
            if (s < 0) {
                clearInterval(timer);
                time.innerHTML = "商品活动时间已结束！！！！";
                return;
            }
            haha();
        }, 1000)
    </script>
</body>

@是静静啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机颜色、鼠标移动、活动倒计时例子

文章目录1、随机修改字体大小和文字颜色2、跟随鼠标移动显示提示框3、商品活动时间倒计时1、随机修改字体大小和文字颜色 /* 写一个定时器，没隔一秒修改一次字体大小和文字颜色，最开始字体默认大小，然后增大，当增大6 次以后字体开始缩小，缩小6次再增大 */ function getRandColor() { return "rgba(" + getRand(0, 255) + "," + getRand(0, 255) + "," + getRand(0, 255)
复制链接

扫一扫

专栏目录