时间戳

首页 > 解决方案 > CSS/Javascript 效果不显示

javascript - CSS/Javascript 效果不显示

问题描述

我正在尝试实现这一点：https://codepen.io/arickle/details/XKjMZY 代码在单个 html 文件中。当我打开我制作的文件时，不会显示下雨效果，但切换按钮会显示。我对网络开发不是很熟悉，所以我很难理解我做错了什么。任何帮助，将不胜感激。

<!DOCTYPE html>
<html>
    <head>

        <style>
            html {
            height: 100%;
            }

            body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #202020, #111119);
            }

            .rain {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            }

            .rain.back-row {
            display: none;
            z-index: 1;
            bottom: 60px;
            opacity: 0.5;
            }

            body.back-row-toggle .rain.back-row {
            display: block;
            }

            .drop {
            position: absolute;
            bottom: 100%;
            width: 15px;
            height: 120px;
            pointer-events: none;
            animation: drop 0.5s linear infinite;
            }

            @keyframes drop {
            0% {
                transform: translateY(0vh);
            }
            75% {
                transform: translateY(90vh);
            }
            100% {
                transform: translateY(90vh);
            }
            }

            .stem {
            width: 1px;
            height: 60%;
            margin-left: 7px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
            animation: stem 0.5s linear infinite;
            }

            @keyframes stem {
            0% {
                opacity: 1;
            }
            65% {
                opacity: 1;
            }
            75% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
            }

            .splat {
            width: 15px;
            height: 10px;
            border-top: 2px dotted rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            opacity: 1;
            transform: scale(0);
            animation: splat 0.5s linear infinite;
            display: none;
            }

            body.splat-toggle .splat {
            display: block;
            }

            @keyframes splat {
            0% {
                opacity: 1;
                transform: scale(0);
            }
            80% {
                opacity: 1;
                transform: scale(0);
            }
            90% {
                opacity: 0.5;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.5);
            }
            }

            .toggles {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            }

            .toggle {
            position: absolute;
            left: 20px;
            width: 50px;
            height: 50px;
            line-height: 51px;
            box-sizing: border-box;
            text-align: center;
            font-family: sans-serif;
            font-size: 10px;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.2);
            color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
            }

            .toggle:hover {
            background-color: rgba(255, 255, 255, 0.25);
            }

            .toggle:active {
            background-color: rgba(255, 255, 255, 0.3);
            }

            .toggle.active {
            background-color: rgba(255, 255, 255, 0.4);
            }

            .splat-toggle {
            top: 20px;
            }

            .back-row-toggle {
            top: 90px;
            line-height: 12px;
            padding-top: 14px;
            }

            .single-toggle {
            top: 160px;
            }

            body.single-toggle .drop {
            display: none;
            }

            body.single-toggle .drop:nth-child(10) {
            display: block;
            }
        </style>

        
</head>


<body class="back-row-toggle splat-toggle">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js">
        var makeItRain = function() {
        //clear out everything
        $('.rain').empty();
    
        var increment = 0;
        var drops = "";
        var backDrops = "";
    
        while (increment < 100) {
            //couple random numbers to use for various randomizations
            //random number between 98 and 1
            var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
            //random number between 5 and 2
            var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
            //increment
            increment += randoFiver;
            //add in a new raindrop with various randomizations to certain CSS properties
            drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
            backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
        }
    
        $('.rain.front-row').append(drops);
        $('.rain.back-row').append(backDrops);
        }
    
        $('.splat-toggle.toggle').on('click', function() {
        $('body').toggleClass('splat-toggle');
        $('.splat-toggle.toggle').toggleClass('active');
        makeItRain();
        });
    
        $('.back-row-toggle.toggle').on('click', function() {
        $('body').toggleClass('back-row-toggle');
        $('.back-row-toggle.toggle').toggleClass('active');
        makeItRain();
        });
    
        $('.single-toggle.toggle').on('click', function() {
        $('body').toggleClass('single-toggle');
        $('.single-toggle.toggle').toggleClass('active');
        makeItRain();
        });
    
        makeItRain();
    </script>
    <div class="rain front-row"></div>
    <div class="rain back-row"></div>
    <div class="toggles">
      <div class="splat-toggle toggle active">SPLAT</div>
      <div class="back-row-toggle toggle active">BACK<br>ROW</div>
      <div class="single-toggle toggle">SINGLE</div>
    </div>
  </body>
</html>

标签： javascripthtmlcss

解决方案

您可能过早地导入脚本。

以下设置将不起作用，因为my-div脚本运行时该元素不存在。

<body>
    <script type="text/javascript">
        document.getElementById("my-div").innerText = "Hello to you as well.";
    </script>
    <div id="my-div">Hello</div>
</body>

script您可以通过在末尾导入body（在创建元素之后）来解决此问题。

<body>        
    <div id="my-div">Hello</div>

    <!-- ... -->

    <script type="text/javascript">
        document.getElementById("my-div").innerText = "Hello to you as well.";
    </script>
</body>

您仍然可以在head文档中导入 jQuery。只需确保在这些元素之后导入使用您定义的元素的任何内容：

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>        
    <div id="my-div">Hello</div>

    <!-- ... -->

    <script type="text/javascript">
        $('#my-div').on('click', function() {
            // ...
        });
    </script>
</body>

推荐阅读