使用vue瞎写的一段代码-1

àì夳堔傛蜴生んèń 2023-07-07 11:18 9阅读 0赞

弹幕demo：

<template>
      <div>
        
        <div id="p" style="margin:0 auto;height:600px;text-align: center">
          
          <div
            name="topDiv"
            class="animated fadeInDown"
            style="color:#FF44AA;height:40px;width:300px;float:right;margin-left:0px;font-size:30px;margin-right:569px;margin-top:6.769671679821626px;z-index:6.769671679821626px"
          >小傻</div>
          <div
            name="topDiv"
            class="animated fadeInLeft"
            style="color:#FF44AA;height:40px;width:300px;float:right;margin-left:0px;font-size:30px;margin-right:569px;margin-top:6.769671679821626px;z-index:6.769671679821626px"
          >小傻</div>
          
          <div
            name="topDiv"
            class="animated coreRotate"
            style="color:#FF44AA;height:40px;width:300px;float:right;margin-left:0px;font-size:30px;margin-right:569px;margin-top:6.769671679821626px;z-index:6.769671679821626px"
          >小傻</div>
          
          <div
            name="topDiv"
            class="animated fadeInRight"
            style="color:#FF44AA;height:40px;width:300px;float:right;margin-left:0px;font-size:30px;margin-right:569px;margin-top:6.769671679821626px;z-index:6.769671679821626px"
          >小傻</div>
          <div
            name="topDiv"
            class="animated fadeInUpLeft"
            style="color:#FF44AA;height:40px;width:300px;float:right;margin-left:0px;font-size:30px;margin-right:569px;margin-top:6.769671679821626px;z-index:6.769671679821626px"
          >小傻</div>
        </div>
        <div style="width:100%;
    				height:76px;
    				position:absolute;
    				bottom:0;
    				left:0;">
          <input v-model="inputContent" id="materialSearch" type="text" @keyup.enter="search" value />
        </div>
      </div>
    </template>
    <script>
    export default { 
      data() { 
        return { 
          winWidth: 0,
          winHeight: 0,
          inputContent: "",
          note: { 
            backgroundImage: "url(" + require("../../assets/13.jpeg") + ")",
            backgroundRepeat: "no-repeat",
            backgroundSize: "400px auto",
            marginTop: "0px"
          }
        };
      },
      methods: { 
        moveRightDiv: function(obj) { 
          // alert(111)
          var divMarginRight = parseInt(eval(obj).style.marginRight) - 2;
          // alert(eval(obj).style.marginRight);
          if (divMarginRight <= -300) { 
            divMarginRight = this.winWidth;
          }
          eval(obj).style.marginRight = divMarginRight + "px";
        },
        moveLeftDiv: function(obj) { 
          // alert(111)
          var divMarginRight = parseInt(eval(obj).style.marginRight) + 2;
          // alert(eval(obj).style.marginRight);
          if (divMarginRight >= this.winWidth) { 
            divMarginRight = 0;
          }
          eval(obj).style.marginRight = divMarginRight + "px";
        },
        search: function() { 
          if (this.inputContent != null) { 
            var num = Math.random();
            console.log(num);
            var type = 1;
            if (num > 0.5) { 
              type = 2;
            }
            this.init(type);
            document.getElementById('materialSearch').value = '';
            // event.data = '';
            this.inputContent = null;
          }
        },
        init: function(type) { 
          //type=1从左到有，type=2从右到左
          var length = document.getElementsByName("topDiv").length;
          // alert(length)
          if (length >= 15) { 
            var my = document.getElementsByName("topDiv")[0];
            my.parentNode.removeChild(my);
          }
          var color =
            "#" +
            Math.random()
              .toString(16)
              .slice(-6);
          var _this = this;
          var id = Math.random();
          var marginTop = 0;
          var marginRight = 0;
          var marginLeft = this.winWidth - 300;
          if (type == 1) { 
            var marginRight = this.winWidth - 300;
            var marginLeft = 0;
          }
          var html = document.getElementById("p").innerHTML;
          document.getElementById("p").innerHTML =
            html +
            '<div name="topDiv" class="animated coreRotate" style="width:auto;height:40px;float:right;margin-left:' +
            marginLeft +
            "px;font-size:30px;" +
            "margin-right:" +
            marginRight +
            "px;margin-top:" +
            marginTop +
            "px;z-index:" +
            marginTop +
            "px;color:" +
            color +
            '" id="' +
            id +
            '">' +
            this.inputContent +
            "</div>";
          if (type == 1) { 
            setInterval(function() { 
              _this.moveRightDiv(document.getElementById(id));
            }, 1000 / 40);
          } else { 
            setInterval(function() { 
              _this.moveLeftDiv(document.getElementById(id));
            }, 1000 / 40);
          }
        },
        modifyBodyColor: function() { 
          var color =
            "#" +
            Math.random()
              .toString(16)
              .slice(-6);
          document.bgColor = color;
        },
        inputA: function() { 
          this.inputContent = '你好啊';
          this.search();
        }
      },
      mounted() { 
        this.winWidth = document.body.clientWidth;
        // document.body.style.right = window.screen.right;
        this.winHeight = window.screen.height;
        document.bgColor = "lightcyan";
        // document.body.style.backgroundImage = "url(" + require("../../assets/13.jpeg") + ")";
        // document.body.style.backgroundSize = 'contain';
        setInterval(this.inputA, 5000);
      }
    };
    </script>
    <style scoped>
    /* body { */
      /* background: linear-gradient(#496eaa, #944fa8, #a8804f, #496eaa); */
      /* background-size: 1400% 300%; */
      /* position: absolute; */
      /* top: 10px; */
      /* left: 10px; */
      /* animation: mymove 3s ease infinite; */
      /* -webkit-animation: mymove 3s ease infinite; */
      /* -moz-animation: mymove 3s ease infinite; */
    /* } */
    @keyframes mymove { 
      0% { 
        background-position: 0% 0%;
      }
      50% { 
        background-position: 50% 100%;
      }
      100% { 
        background-position: 100% 0%;
      }
    }
    input { 
      width: 40%;
      height: 40%;
      position: relative;
      padding-left: 0.533333rem;
      border-radius: 0.4rem;
      color: #333333;
      /* font-size: 0.426667rem; */
      text-align: vertical-align;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      background: rgba(248, 248, 248, 1);
      line-height: 0.586667rem;
    }
    input::-webkit-input-placeholder { 
      color: #cccccc;
    }
    /*动画-start*/
    .animated { 
      animation-duration: 5.5s !important;
      -webkit-animation-duration: 5.5s !important;
      animation-fill-mode: both !important;
      -webkit-animation-fill-mode: both !important;
    }
    .animated02 { 
      animation-duration: 1s !important;
      -webkit-animation-duration: 1s !important;
      animation-fill-mode: both !important;
      -webkit-animation-fill-mode: both !important;
    }
    /*逐渐显示*/
    .toShow { 
      position: absolute;
      animation: toShow 1.5s 0.5s;
      animation: toShow 1.5s 0.5s;
      animation-fill-mode: both !important;
      -webkit-animation-fill-mode: both !important;
    }
    /* 放大效果*/
    .enlarge { 
      animation-name: enlarge;
      -webkit-animation: enlarge;
    }
    /*从上到下进入*/
    .fadeInDown { 
      animation-name: fadeInDown;
      -webkit-animation: fadeInDown;
    }
    /*从下到上进入*/
    .fadeInUpLeft { 
      animation-name: fadeInUpLeft;
      -webkit-keyframes: fadeInUpLeft;
    }
    /*从右到左进入*/
    .fadeInRight { 
      animation-name: fadeInRight;
      -webkit-animation: fadeInRight;
    }
    /*从左到右进入*/
    .fadeInLeft { 
      animation-name: fadeInLeft;
      -webkit-animation: fadeInLeft;
    }
    /*中心旋转*/
    .coreRotate { 
      animation-name: coreRotate;
      -webkit-animation-name: coreRotate;
    }
    
    @keyframes toShow { 
      0% { 
        opacity: 0;
      }
      100% { 
        opacity: 1;
      }
    }
    @-webkit-keyframes toShow { 
      0% { 
        opacity: 0;
      }
      100% { 
        opacity: 1;
      }
    }
    
    @keyframes enlarge { 
      from { 
        opacity: 0;
        -ms-transform: scale(0.1, 0.1); /* IE 9 */
        -webkit-transform: scale(0.1, 0.1); /* Safari */
        transform: scale(0.1, 0.1); /* 标准语法 */
      }
      to { 
        opacity: 1;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }
    
    @-webkit-keyframes enlarge /* Safari 与 Chrome */ { 
      from { 
        opacity: 0;
        -ms-transform: scale(0.1, 0.1); /* IE 9 */
        -webkit-transform: scale(0.1, 0.1); /* Safari */
        transform: scale(0.1, 0.1); /* 标准语法 */
      }
      to { 
        opacity: 1;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }
    
    /*从上到下*/
    @keyframes fadeInDown { 
      from { 
        opacity: 0;
        -webkit-transform: translate(0, -1000px); /* Safari */
        transform: stranslate(0, -1000px); /* 标准语法 */
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(0, 10px); /* Safari */
        transform: stranslate(0, 10px); /* 标准语法 */
      }
    }
    
    @-webkit-keyframes fadeInDown /* Safari 与 Chrome */ { 
      from { 
        opacity: 0;
        -webkit-transform: translate(0, -1000px); /* Safari */
        transform: stranslate(0, -1000px); /* 标准语法 */
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(0, 10px); /* Safari */
        transform: stranslate(0, 10px); /* 标准语法 */
      }
    }
    /*从左下到右上*/
    @keyframes fadeInUpLeft { 
      from { 
        opacity: 0;
        -webkit-transform: translate(-1000px, 1000px); /* Safari */
        transform: stranslate(-1000px, 1000px); /* 标准语法 */
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(0, 10px); /* Safari */
        transform: stranslate(0, 10px); /* 标准语法 */
      }
    }
    
    @-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */ { 
      from { 
        opacity: 0;
        -webkit-transform: translate(-1000px, 1000px); /* Safari */
        transform: stranslate(-1000px, 1000px); /* 标准语法 */
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(0, 10px); /* Safari */
        transform: stranslate(0, 10px); /* 标准语法 */
      }
    }
    /*从右到左进入*/
    @keyframes fadeInRight { 
      from { 
        opacity: 0;
        -webkit-transform: translate(1000px, 0);
        transform: stranslate(1000px, 0);
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(10px, 0);
        transform: stranslate(10px, 0);
      }
    }
    
    @-webkit-keyframes fadeInRight { 
      from { 
        opacity: 0;
        -webkit-transform: translate(1000px, 0);
        transform: stranslate(1000px, 0);
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(10px, 0);
        transform: stranslate(10px, 0);
      }
    }
    /*从左到右进入*/
    @keyframes fadeInLeft { 
      from { 
        opacity: 0;
        -webkit-transform: translate(-1000px, 0);
        transform: stranslate(-1000px, 0);
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(10px, 0);
        transform: stranslate(10px, 0);
      }
    }
    
    @-webkit-keyframes fadeInLeft { 
      from { 
        opacity: 0;
        -webkit-transform: translate(-1000px, 0);
        transform: stranslate(-1000px, 0);
      }
      to { 
        opacity: 1;
        -webkit-transform: translate(10px, 0);
        transform: stranslate(10px, 0);
      }
    }
    
    /*绕中心旋转*/
    @keyframes coreRotate { 
      5% { 
        transform: rotate(5deg);
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Safari and Chrome */
      }
      30% { 
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
      }
      60% { 
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
      }
      90% { 
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
      }
    }
    @-webkit-keyframes coreRotate { 
      5% { 
        transform: rotate(5deg);
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Safari and Chrome */
      }
      30% { 
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
      }
      60% { 
        transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
      }
      90% { 
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
      }
    }
    /*动画-end*/
    </style>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5Njc0MjYz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5Njc0MjYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222224422788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5Njc0MjYz,size_16,color_FFFFFF,t_70