JavaScript 小案例弹幕

功能：

1.输入框内输入文字，点击发送，或按enter键
2.框内文字清空
3.文字随机从屏幕左边运动至屏幕右边
4.文字运动到右边界结束消失

所有代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>弹幕</title><style>html,body{font-size:10px;overflow:hidden;margin:0;padding:0;}#box{width:100%;height:100%;}#dm{width:100%;height:90vh;background:#E8F1F5;}#dm span{width:auto;height:3rem;font-size:2rem;line-height:2rem;position:absolute;white-space:nowrap;}#idDom{width:100%;height:10vh;background:#666;position:absolute;bottom:0;display:flex;align-items:center;justify-content:center;}#content{width:50rem;height:10vh;display:flex;align-items:center;justify-content:center;}.title{font-size:2.2px rein;color:#fff;line-height:#ccc;}.text{width:30rem;height:2.5rem;border:none;border-radius:.5rem;font-size:1.4rem;margin:0 .5rem;padding:0 1rem;}.btn{width:6rem;height:3rem;border:none;background:red;color:#fff;}</style>
</head>
<body>
<div class="box" id="box"><div id="dm"></div><div class="idDom" id="idDom"><div id="content"><p class="title">吐槽:</p><input type="text" class="text" id="text" placeholder="请输入你想说的话" /><button type="button" class="btn" id="btn">发送</button></div></div>
</div>
<script>var timer;var btn = document.getElementById('btn');btn.onclick = function() { addBarrage();}document.onkeydown = function(evt) {var event = evt || window.event;if (event.keyCode == 13) {addBarrage();}}var colors = ['#2C3E50', '#FF0000', '#1E87F0', '#7AC84B', '#FF7F00', '#9B39F4', '#FF69B4'];//弹幕颜色库function addBarrage() {clearInterval(timer);var text = document.getElementById('text').value;document.getElementById('text').value = "";var index = parseInt(Math.random() * colors.length); //随机弹幕颜色var screenW = window.innerWidth;var screenH = dm.offsetHeight;var max = Math.floor(screenH / 40);var height = 10 + 40 * (parseInt(Math.random() * (max + 1)) - 1);var span = document.createElement('span');span.style.left = screenW + 'px';span.style.top = height + 'px';span.style.color = colors[index];span.innerHTML = text;var dmDom = document.getElementById('dm');dmDom.appendChild(span);timer = setInterval(move, 10);}function move() {var arr=[];var oSpan=document.getElementsByTagName('span');for(var i=0;i<oSpan.length;i++){arr.push(oSpan[i].offsetLeft);arr[i] -= 2;oSpan[i].style.left = arr[i]+'px';if(arr[i]<-oSpan[i].offsetWidth){var dmDom=document.getElementById('dm');dmDom.removeChild(dmDom.childNodes[0]);}}}
</script>
</body>
</html>

JavaScript 小案例弹幕相关推荐

HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
javascript小案例-----tab栏切换
效果如下: 代码思路: 上面的选项卡,点击某一个,当前这一个会变成粉红色,其他不变(排他思想) 修改类名的方式下面的内容会随着上面的选项卡变化,所以下面的模块变化要写到点击事件里面下面的模块显示内 ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
javascript小案例-----快递单号查询
要求: 当我们在文本中输入内容时,文本框自动显示大字号的内容效果如下: 代码思路: 快递单号输入内容时,上面的大号字体盒子( con)显示(这里面的字号更大) 表单检测用户输入∶给表单添加键盘事件 ...
JavaScript小案例——分时显示不同图片，显示不同问候语
要求: 1.根据不同时间,页面显示不同的问候语. 2.如果上午时间打开画面,显示上午好,显示上午的照片.中午,晚上同理. 分析: 1.根据不同系统不同时间来判断,所有需要用到日期内置对象. 2.利用多 ...
JavaScript小案例——登入页面（密码小眼睛）
题目: 制作一个简单的登入页面,运用到简单的js技巧,实现密码框中小眼睛的功能. 注意:本篇介绍的案例没有运用到大量的js技巧,和页面渲染,只是简单的页面和交互.例如,输入密码不正确,检测输入栏是否为 ...

JavaScript 小案例弹幕

功能：

JavaScript 小案例弹幕相关推荐

最新文章

热门文章

JavaScript 小案例 弹幕

功能：

JavaScript 小案例 弹幕相关推荐

最新文章

热门文章

JavaScript 小案例弹幕

JavaScript 小案例弹幕相关推荐