原生js实现弹幕效果


Posted in Javascript onNovember 29, 2020

本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下

效果展示:

原生js实现弹幕效果

源码展示:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>原生js实现弹幕效果</title>
  <style>
    * {
      padding:0;
      margin:0;
    }
    .all {
      width:600px;
      height:400px;
      background:#000000;
    }
    /*.danmu {*/
      /*width:600px;*/
      /*height:500px;*/
      /*background:#000000;*/
      /*overflow:hidden;*/
      /*z-index:50;*/
    /*}*/
  </style>
</head>
<body>
<div class="all">
 
</div>
<input type="text" class="texts" value="这是一个弹幕。。。">
<button>发送</button>
 
<script>
  var all = document.querySelector('.all');
  var danmu = document.querySelector('.danmu');
  var buttons = document.querySelector('button');
  var texts = document.querySelector('.texts');
  console.log(texts.value);
  buttons.onclick = function() {
    var p = document.createElement('p');
    p.style.position = 'absolute';
    p.innerHTML = texts.value;
    p.style.left = 600 + 'px';
    p.style.color = 'white';
    p.style.zIndex = 100;
    p.style.top = Math.random() * 490 + 'px';
    all.appendChild(p);
    var x = setInterval(function() {
      p.style.left = parseInt(p.style.left) - 10 + 'px';
      if ((parseInt(p.style.left) + 600) <= 0) {
        all.removeChild(p);
        clearInterval(x);
      }
 
    }, 100)
 
  }
</script>
<pre style="color:red">
 感: 最近贡献一下我在教学中的小案例 希望能给你一些帮助 ,希望大家继续关注我的博客
 
                                        --王
</pre>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
javascript实现点击小图显示大图
Nov 29 #Javascript
js实现简易点击切换显示或隐藏
Nov 29 #Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 #Javascript
You might like
PHP自定义函数收代码
2010/08/01 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
动态加载js的几种方法
2006/10/23 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
工程招投标邀请书
2014/01/30 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
教师自我鉴定范文
2014/03/20 职场文书
优质服务活动实施方案
2014/05/02 职场文书
企业文化标语大全
2014/06/10 职场文书
高中综合实践活动总结
2014/07/07 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python