JS实现弹幕的发送

 <div class="box1">
<div class="box2" style="width: 600px;height:400px"> </div>
<input placeholder="发送弹幕"/><button>发送</button>
</div>
<style>

        .box1{
width: 600px;
text-align: left;
}
.box2{
background-color: black;
margin-bottom: 20px;
}
input{
width: 300px;
height: 30px;
font-size: 21px;
margin-right: 20px;
margin-left: 20px;
}
button{
width: 100px;
height: 35px;
vertical-align: top;
}
</style>
  <script>

        let box2 = document.getElementsByClassName("box2")[0];
let input = document.getElementsByTagName("input")[0];
let button = document.getElementsByTagName("button")[0]; let rand = function(start,end){
let num = Math.floor(Math.random()*(end-start+1)+start);
return num;
} let move = function(){
let span = document.createElement("span");
span.innerText = input.value;
input.value = '';
let speed = rand(5,10);
span.style.display = "inline-block";
span.style.height = 25+"px";
span.style.position = "absolute";
span.style.left = box2.style.width;
span.style.top = rand(1,400-parseInt(span.style.height))+"px";
span.style.color = "white";
box2.appendChild(span);
let stop = setInterval(function(){
span.style.left = parseInt(span.style.left)-speed+"px";
if(parseInt(span.style.left)<0){
clearInterval(stop);
box2.removeChild(span);
}
},50);
}
button.onclick = move;
document.onkeydown = function(e){
if(e.keyCode==13){
move();
}
} </script>

实现图:

JS 发送弹幕的更多相关文章

  1. 微信小程序播放视频发送弹幕效果

    首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...

  2. js实现弹幕效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  4. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  5. js发送windows提示信息

    js发送windows提示信息 效果图 代码 Notification.requestPermission(function() { if(Notification.permission === 'g ...

  6. Node.js 发送Email

    章节 Node.js 介绍 Node.js 入门 Node.js 模块 Node.js HTTP模块 Node.js 文件系统模块 Node.js URL模块 Node.js NPM Node.js ...

  7. js实现弹幕

    弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进. 直接上代码:复制可运行 <!DOCTYPE html> <html> <h ...

  8. 前端 js 发送验证码

    1. 代码如下: <html> <head> <meta charset="utf-8"> <title></title> ...

  9. node.js 发送http 请求

    自己研究了一下 node.js 的 http模块  下面为想服务器发送请求的代码 ,通过学习了解http 请求的过程 ,node.js 对http请求的原始封装比较低,以前php 可以用$_GET , ...

随机推荐

  1. C之静态内存和动态内存

    静态内存: * 自动申请,自动释放* 大小固定,内存空间连续* 从栈上分配的内存叫静态内存 动态内存: * 程序员自己申请 * new/malloc* 大小取决于虚拟内存的大小,内存空间不连续* ja ...

  2. linux下怎么用ssh连接另一台linux服务器

    linux系统大家都知道是服务器版本一般都没有图像界面,通过字符界面操作.用ssh远程方式远程,如果要从一台linux远程到另外一台系统应该怎么操作呢本经验咗嚛以cenots7为例演示   方法/步骤 ...

  3. Servlet 的三种跳转方式

    1.Forword request.getRequestDispatcher (“url”).forword (request,response) 是请求转发,也就是说,一个 Servlet 向当前的 ...

  4. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_18-异常处理-不可预知异常处理

    框架抛出来的或者一些第三方的组件抛出来的异常.我们根本不知道它所对应的错误代码的信息,所以我们也没有办法给用户返回具体的错误代码和错误信息. 我们先在Map中定义有一些不可预知的异常,定义错误代码和错 ...

  5. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_01-vuejs研究-vuejs介绍

    1.vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用.Vue 的核心库只关注视 ...

  6. ubuntu kylin 18.04 使用 wine 安装 EasyConnect 的windows版本

    首先下载wine: sudo apt-get install wine-stable 然后使用wine安装安装包EXE文件(安装包你自己去下): wine EasyConnectInstaller.e ...

  7. CockroachDB学习笔记——[译]Scaling Raft

    原文链接:https://www.cockroachlabs.com/blog/scaling-raft/ 原作者:Ben Darnell 原文日期:Jun 11, 2015 译:zifeiy 在Co ...

  8. 依赖管理系统 go modules

    golang在1.11版本中引入了新的包管理工具 go mod 类似于maven包管理(多项目公用),而之前的vendor类似于node的node_modules管理(各个项目一份) 依赖信息添加到g ...

  9. centos7安装过程中的安装源设置

    centos7的安装源设置:http://mirrors.aliyun.com/centos/7/os/x86_64/

  10. Odoo13 新变化:会计

    Odoo13将于2019年10月发布,本次发布也包含了大量的改进,例如,对会计的重构. 去掉了 account.invoice / account.invoice.line/ account.vouc ...