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

最新推荐文章于 2022-03-15 21:19:29 发布
最新推荐文章于 2022-03-15 21:19:29 发布
阅读量162 收藏
点赞数
分类专栏： 前端 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19674263/article/details/104451943
版权

弹幕demo：

<template>
  <div>
    <!---->
    <div id="p" style="margin:0 auto;height:600px;text-align: center">
      <!-- <p id="c" class="animated toShow" style="height:10px;width:300px;">逐渐显示</p>
      <p id="c1" class="animated enlarge" style="height:10px;width:300px;">放大效果</p>
      <p id="c2" class="animated fadeInDown" style="height:10px;width:300px;">从上到下进入</p>
      <p id="c3" class="animated fadeInUpLeft" style="height:10px;width:300px;">从下到上进入</p>
      <p id="c4" class="animated fadeInRight" style="height:10px;width:300px;">从右到左进入</p>
      <p id="c5" class="animated fadeInLeft" style="height:10px;width:300px;">从左到右进入</p>
      <p id="c6" class="animated coreRotate" style="height:10px;width:300px;">中心旋转</p>-->
      <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 toShow" style="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 toShow" style="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>

效果图：
在这里插入图片描述

站在墙头上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Vue编写一段非常简单的代码~
weixin_61719872的博客
03-02 937
Vue框架入门中，希望和大家指点迷津~ 在学习混合框架之前，学习过html5、css和js,可以制作一些简单的网页 学习过网页基础前端开发的就比较容易上手Vue 这里使用的是HBuilder X 3.3.11版本，写的一段非常非常简陋的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.jsdeliv...
vue代码片段
weixin_52772897的博客
05-20 536
{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", "export default {", " props: {\n", " },", " data() {", " .
vue常用代码
蛋蛋老公的博客
05-18 3317
目录vue结构1、sessionStorage2、路由跳转及携带参数3、正则验证test3、$set的使用4、find的用法5、findIndex()的用法6、filter()的用法7、includes()的用法8、some()的用法9、every()的用法10、reduce的用法11、splice的用法12、移动端实现高度满屏13、数组对象去重14、vue修改路由递归15、获取对象的key值15、获取对象的value值16、获取数组对象中某一属性值的集合17、双层for循环删除18、防抖19、节流20、浏
vue的用户代码片段
qq_44642822的博客
03-15 183
vscode创建vue文件总是需要手动编写vue文件格式，使用用户代码片段，只用三个字母立即完成vue代码格式
我的第一段vue代码
读心悦
10-12 122
想了一段时间，觉得还是先把node放下，得学一学vue。还是顺应市场的需要来制定自己的学习计划吧。 这是我的第一段vue代码，宣布自己正式进军vue的世界了。 vue-cli 首先是采用vue的脚手架来创建vue应用，它和create-react-app一样。 全局安装：npm install -g @vue/cli 查看是否安装成功：vue --version 查到对应版本号，就说明安装成功了。 开始创建应用： vue create 应用名称 然后可以选择vue对应的版本模板，现在我选择的是vue3，如下
获取transform的各种函数如：translate(0px,0px)
分享是一种美德，开源是一种气度
10-07 1万+
使用正则即可匹配，代码如下： var transformStr="translate(-1972px, 0px)translateZ(0px)"; var matchStr=transformStr.match(/\.*translate\((.*?)\)/);
vuepress-plugin-demo-code::memo:vuepress的演示和代码插件
05-03
使用此插件，您可以通过以下语法同时显示演示和代码。 ::: demo <div xss=removed>Click me! [removed] export default { methods: { onClick: () => { window.alert( 1 ) }, }, } [removed] ::: 特征 ...
vuepress-plugin-vue-example:一个Vuepress插件，可在文档内部显示Vue组件的实时示例和源代码
04-02
易于使用，只需在.md或.vue文件中使用一个vue-example标记 使用Vuepress的内置语法突出显示功能 显示完整的实时示例 将源代码拆分为单独的部分，以获取template script和style 能够从源代码中删除注释 能够在每个节...
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
`vue-property-decorator`是一个库，它是Vue.js和TypeScript的结合，提供了装饰器来帮助我们在TypeScript中更好地声明和管理组件的属性。它使得我们可以利用TypeScript的强类型系统，提高代码的可维护性和可读性。...
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
vue2-gmap-custom-marker:Vue Google Map自定义标记组件
05-05
对于使用vue-google-maps的旧项目，您必须坚持使用该项目标签 。 您可能会在package.json中强制该插件的5.6.2版本保持兼容性，直到您想要切换到gmap-vue为止。 对于那些使用带有此插件的群集的用户，新版本可能会...
一个基于Vue和Element-ui的个人博客系统（附完整代码）
热门推荐
知行合一，跬步致远
07-04 1万+
简介         这是一个偏前端的博客项目，其前端是基于Element-UI和Vue2.0开发实现的，后端的实现使用了Google的Firebase作为实时数据库，直接调用它提供的接口来实现数据的读取和存储。（由于项目使用了国外的firebase，所以需要连接VPN才能正常工作。）         此博客系统实现了基本的博客发布，修改，删除和查询；应用到的vue技术主要有axios请求、父...
vscode添加Vue代码段
有道无术，术尚可求，有术无道，止于术。
02-14 999
1.依次打开   文件→首选项→用户代码片段  2.找到关于HTML的Jason文件  3.将以下代码添加到html.json(HTML)中，并进行CTRL+S 保存 {"vue代码": { "prefix": "ve", "body": [ "&lt;!DOCTYPE html&gt;", "", "&lt;html lang=
一段代码 简单总结Vue生命周期
weixin_34315189的博客
09-04 96
<div id="app"> <sub-component :num=this.num v-if="this.num < 2"></sub-component> </div> 复制代码 const subComponent = { template: '<h3>{{ num }}</h3>', props...
一段代码，入门，vue、element-ui，
weixin_39990025的博客
12-06 183
上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/ind...
01 初识Vue：写一段最简单的Vue程序
巅峰键盘侠
08-24 620
阅读这篇文章之前，阁下需要掌握一点点的HTML、CSS、JavaScript代码基础，能看懂基础的标签和语法即可。 1、安装IDE工具 写代码，终归是要找一款像样的开发工具的，总不能上来就拿个txt开干吧，跟约会一样，没有谁会直接到第一次见面就叫女孩子去开房，言归正传，开发工具你来选一款：WebStorm，还是VS Code，自己装一个吧。 我学习用的这台电脑装的是WebStorm 2018...
html写的玫瑰花
站在墙头上的博客
02-22 5598
网上摘抄，自己又修修补补，添点小东西： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>情人节快乐</title> <!-- <embed src="123.mp3" hidden="true" autostart...
vue打包后路径多了个/css/static
站在墙头上的博客
05-05 2125
vue打包后路径多了个/css/static导致一些css属性效果不显示。 解决方法： 在build/utils.js文件中添加publicPath:’…/…/’,重新打包即可。 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: "vue-s...
谷歌浏览器打不开产品给的原型图，提示AXURE RP EXTENSION For Chrome
站在墙头上的博客
03-23 1981
提示AXURE RP EXTENSION For Chrome的解决办法 For Chrome的解决办法) 在用谷歌浏览器打开产品给的原型图的html的时候会报错，提示需要安装AXURE插件。 出现这个情况就是因为html在打开的时候会去加载谷歌的插件AXURE，如果没有安装插件的话就会提示这个。 解决方法： 最简单的方式就是换个浏览器打开，火狐,ie等。 所以如果电脑上没有安装别的浏览...
写一段Vue-simple-uploader上传视频到服务器代码
最新发布
04-20
此代码使用了Vue-simple-uploader插件，通过ref引用插件组件，设定上传文件的地址、文件类型、字段名等属性，并手动上传单个视频文件。当然，为了实现该功能，服务器端也需要使用对应的技术栈进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值