JS 发送弹幕
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 发送弹幕的更多相关文章
- 微信小程序播放视频发送弹幕效果
首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...
- js实现弹幕效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- js发送windows提示信息
js发送windows提示信息 效果图 代码 Notification.requestPermission(function() { if(Notification.permission === 'g ...
- Node.js 发送Email
章节 Node.js 介绍 Node.js 入门 Node.js 模块 Node.js HTTP模块 Node.js 文件系统模块 Node.js URL模块 Node.js NPM Node.js ...
- js实现弹幕
弹幕是一个很常见的功能,下面是本人封装的一个小小的实现方案,存在不足之处可以提出来或自由改进. 直接上代码:复制可运行 <!DOCTYPE html> <html> <h ...
- 前端 js 发送验证码
1. 代码如下: <html> <head> <meta charset="utf-8"> <title></title> ...
- node.js 发送http 请求
自己研究了一下 node.js 的 http模块 下面为想服务器发送请求的代码 ,通过学习了解http 请求的过程 ,node.js 对http请求的原始封装比较低,以前php 可以用$_GET , ...
随机推荐
- SQL-W3School-高级:SQL NULL 函数
ylbtech-SQL-W3School-高级:SQL NULL 函数 1.返回顶部 1. SQL ISNULL().NVL().IFNULL() 和 COALESCE() 函数 请看下面的 &quo ...
- Android 显示系统:OpenGL简介和Gralloc代码分析
一.OpenGL ES与EGL Android的GUI系统是基于OpenGL/EGL来实现的. 由于OpenGL是通用函数库,在不同平台系统上需要被“本土化”——把它与具体平台的窗口系统建立起关联,F ...
- 强悍的Python读取大文件的解决方案
这是一道著名的 Python 面试题,考察的问题是,Python 读取大文件和一般规模的文件时的区别,也即哪些接口不适合读取大文件. 1. read() 接口的问题 f =open(filename, ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_01-页面静态化需求分析
上半部分就是静态化 业务流程如下: 1.获取模型数据 2.制作模板 3.对页面进行静态化 4.将静态化生成的html页面存放文件系统中 5.将存放在文件系统的html文件发布到服务器
- VLC-DSS搭建直播系统中链路断开影响测试
VLC-DSS搭建直播系统中链路断开影响测试 系统环境搭建如图所示.计算机77上运行VLC从摄像机51上取流,推送给一级DSS服务器30:二级DSS服务器78从一级DSS服务器30上取流转发.(其配置 ...
- C4model实践总结
能看到这篇文章的人,我就不用废话给你介绍C4model.vscode.plantuml这些是什么以及怎么安装了. 0. 基本语法. 1. 创建常用模板.并保存到snippet. 2.利用关系REL控制 ...
- Go语言中defer语句使用小结
defer是Go语言中的延迟执行语句,用来添加函数结束时执行的代码,常用于释放某些已分配的资源.关闭数据库连接.断开socket连接.解锁一个加锁的资源.Go语言机制担保一定会执行defer语句中的代 ...
- go语言简单介绍,增强了解
1. Go语言没有类和继承的概念,所以它和 Java 或 C++ 看起来并不相同.但是它通过接口(interface)的概念来实现多态性.Go语言有一个清晰易懂的轻量级类型系统,在类型之间也没有层级之 ...
- react新特性hook
一.hook示例. import React, { useState } from 'react'; function Example() { // 声明一个叫 “count” 的 state 变 ...
- 《The C Programming Language》学习笔记
第五章:指针和数组 单目运算符的优先级均为2,且结合方向为自右向左. *ip++; // 将指针ip的值加1,然后获取指针ip所指向的数据的值 (*ip)++; // 将指针ip所指向的数据的值加1 ...