如果我在上一条弹幕还没执行完,还没clearInterval,就发送下一条弹幕,弹幕就会停止,不正常执行
麻烦帮我看下怎么解决,谢谢~
<html>
<style>
#danmuScreen{
background-color:black;
height:300px;
width:300px;
</style>
<div id="danmuScreen">
</div>
<input type="text" id="text"></input><button id="send" onClick="creatDanmu()">发送弹幕</button>
<script type="text/javascript">
//创建弹幕div
function creatDanmu(){
var danmuScreen=document.getElementById("danmuScreen");
var danmuDiv=document.createElement("div");
var text=document.getElementById("text").value;
var danmu
麻烦大神帮我看看,这个弹幕的代码如果我在上一条弹幕还没执行完,还没clearInterval,就发送下一条弹幕,弹幕就会停止,不正常执行麻烦帮我看下怎么解决,谢谢~&lt;html&gt;&lt;style&gt;#danmuScreen{background-color:black;height:300px;width:300px;}&lt;/style&gt;...
多个
setInterval
冲突
问题同一个函数段里(例如同一个函数)需要先后
运行
两个
setInterval
的时候会出错。两者几乎同时并行,不知道网页是怎么加载的。。。解决方案:在interval A 结束的时候,在interval A里面调用另外一个interval B例如:var t=
setInterval
(function A(){
//do something…
//add
<div id="comment-container">
<div class="comment-item">我是评论1</div>
<div class="comment-item">我是评论2</div>
<div class="comment-item">我是评论3</div>
CSS样式:
```css
#comment-container {
position: relative;
height: 300px;
overflow: hidden;
.comment-item {
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
JS
代码
:
```javascript
$(function() {
// 设置
弹幕
移动速度
var speed = 5000;
// 获取评论容器和评论项
var $container = $('#comment-container');
var $items = $container.find('.comment-item');
// 遍历评论项
$items.each(function() {
// 获取评论项宽度
var itemWidth = $(this).width();
// 设置评论项的初始位置
$(this).css('left', $container.width() + itemWidth);
// 计算评论项移动到容器左侧的时间
var time = ($(this).position().left + itemWidth) * speed / ($container.width() + itemWidth);
// 设置评论项的动画效果
$(this).animate({ left: -itemWidth }, time, 'linear');
2.
弹幕
漂浮
HTML
代码
:
```html
<div id="danmu-container"></div>
CSS样式:
```css
#danmu-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
JS
代码
:
```javascript
$(function() {
// 设置
弹幕
移动速度
var speed = 5000;
// 获取
弹幕
容器
var $container = $('#danmu-container');
// 随机生成
弹幕
setInterval
(function() {
// 随机生成颜色和内容
var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
var content = '我是
弹幕
';
// 创建
弹幕
元素
var $item = $('<div class="danmu-item"></div>').text(content);
// 设置
弹幕
元素的样式
$item.css({
color: color,
top: Math.floor(Math.random() * $container.height()),
left: $container.width()
// 将
弹幕
元素添加到
弹幕
容器中
$container.append($item);
// 计算
弹幕
元素移动到容器左侧的时间
var itemWidth = $item.width();
var time = ($item.position().left + itemWidth) * speed / ($container.width() + itemWidth);
// 设置
弹幕
元素的动画效果
$item.animate({ left: -itemWidth }, time, 'linear', function() {
// 移除
弹幕
元素
$(this).remove();
}, 1000);
3. 滚动
HTML
代码
:
```html
<div id="scroll-container">
<li>我是滚动条目1</li>
<li>我是滚动条目2</li>
<li>我是滚动条目3</li>
CSS样式:
```css
#scroll-container {
position: relative;
height: 100px;
overflow: hidden;
#scroll-container ul {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
#scroll-container ul li {
margin: 5px 0;
JS
代码
:
```javascript
$(function() {
// 设置滚动速度
var speed = 5000;
// 获取滚动容器和滚动列表
var $container = $('#scroll-container');
var $list = $container.find('ul');
// 计算滚动列表的高度
var listHeight = $list.height();
// 复制滚动列表元素
$list.clone().appendTo($container);
// 设置滚动列表的初始位置
$list.css('top', 0);
// 设置滚动列表的动画效果
setInterval
(function() {
$list.animate({ top: -listHeight }, speed, 'linear', function() {
$(this).css('top', $container.height());
}, speed);
Minrff:
h5 获取地理位置 navigator.geolocation.getCurrentPosition(success, error, options)
-小子-:
vue v-model 双向绑定表单元素的数据:实质是绑定了value、checked、selected属性
Aerial_MJ: