setInterval()和clearInterval()是一对很有用的js函数，可以用来重复执行某些功能，利用这个我们可以实现一些很有趣的功能。
scrollTop()函数可以用来实现滚动条一直处于某个位置。
以下是用这三个函数做的一个例子。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var _interval;
var i=1;
function showTime()
{
var today = new Date();
$("#msg").append(today.toLocaleString() + "I am Thinking You!\n");
var scrollTop = $("#msg")[0].scrollHeight;
$("#msg").scrollTop(scrollTop);
i++;
if (i>15)
{
clearInterval(_interval);
}
}
$(document).ready(function(){
$("#btnStart").click(function(){
showTime();
_interval = setInterval("showTime()", 1000);
})
$("#btnStop").click(function(){
clearInterval(_interval);
i=0;
})
})
</script>
</head>
<body>
<textarea id="msg" style="width:400px; height: 100px;border: 1px #ccc solid; resize:none;"></textarea><br/>
<button id="btnStart">开始</button>
<button id="btnStop">停止</button>
<script type="text/javascript">
</script>
</body>
</html>
分享到：
相关推荐
IE7及以下版本不支持CSS3的动画，我们可以使用setTimeout模拟平滑滚动效果： ```javascript if (!window.requestAnimationFrame) { backToTopBtn.addEventListener('click', function() { var scrollPosition = ...
为了实现自动上下滚动，我们可以使用`setInterval`函数，每隔一定时间（如10毫秒）更新`scrollTop`： ```javascript var scrollSpeed = 5; // 每次滚动的像素数量 var interval = setInterval(function() { if ...
在上述代码中，我们使用`document.documentElement.scrollTop`或`document.body.scrollTop`获取当前页面的滚动位置，然后逐渐减小这个值，直到页面回到顶部。当页面滚动距离大于0时，我们显示返回顶部按钮；否则，...
- 使用`setInterval`设置一个定时器，每次滚动一定的像素量，例如`currentScrollPosition -= scrollStep`，并更新元素的`scrollLeft`或`scrollTop`属性。 - 当元素滚动到底部或顶部时，需要进行“无缝”处理。可以...
这个函数通过`setInterval`每隔一定时间（50毫秒）增加`scrollTop`的值，模拟向上滚动的效果。当`scrollTop`达到容器的总高度减去可视高度时，清空定时器并重置`scrollTop`为0，实现循环滚动。 `Stop()`函数则用于...
总结来说，原生JavaScript实现返回顶部缓冲效果的关键在于理解并正确使用`scrollTop`、`clientHeight`和`setInterval`等核心概念。通过这些技术，我们可以创建出既美观又实用的用户体验，提高网站的互动性和用户满意...
首先，需要使用setInterval()方法来实现多行文字连续不断地滚动，然后使用clearInterval()方法来停止文字滚动。 5. Marquee标记可以移动文字、图片、表格甚至其他页面元素，但使用Marquee标记实现文字滚动有一个...
4. **定时器与清除定时器**：使用`setInterval`和`clearInterval`来控制平滑滚动的效果。 #### 三、具体实现步骤 ##### 1. CSS样式设置 - **基础样式**：首先定义了基本的文本样式和页面高度。 - **返回顶部按钮...
- **性能优化**：避免不必要的DOM操作，如使用`requestAnimationFrame`代替`setInterval`，以及使用`classList`进行状态管理。 以上就是使用JavaScript实现“永不停止的从下往上滚动”的详细步骤。根据实际项目...
var timer = setInterval(function() { if (scrollTop > 0) { scrollTop -= 5; document.documentElement.scrollTop = scrollTop; document.body.scrollTop = scrollTop; } else { clearInterval(timer); } ...
- 通过`onMouseOver`和`onMouseOut`事件，当鼠标悬停在图片上时暂停滚动(`clearInterval(Interval)`)，移开后恢复滚动(`Interval = setInterval(Circle, 10);`)。 #### 四、优化建议 1. **性能优化** - 考虑使用...
if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){ btn.style.display=d.scrollTop; } } ``` 这种方法可以实现动态返回页面顶部的功能，并且可以根据需要自定义...
在上面的代码中，我们使用了marquees.scrollLeft和marquees.scrollTop这两个属性来控制图片的滚动。ScrollLeft和ScrollTop是HTML元素中的两个属性，用于控制元素的水平和垂直滚动。 ScrollLeft表示元素的水平滚动...
左右滚动的JavaScript逻辑与上下滚动相似，主要区别在于使用`scrollLeft`属性代替`scrollTop`，实现水平方向的滚动效果。 ### 结语 通过以上分析，我们可以看出，无论是上下还是左右循环滚动，其核心思路都是通过...
JavaScript代码中，我们使用`setInterval`函数来控制图片的循环滚动。`Marquee`函数是图片循环滚动的核心函数，它会不断地将图片滚动到上一个图片的位置。`onmouseover`和`onmouseout`事件是用来控制图片循环滚动的...
当滚动位置与当前位置相等时，通过`clearInterval`停止定时器。 同时，为了在滚动过程中中断回顶部动画，我们可以监听鼠标的滚轮事件，并在滚轮滚动时停止定时器： ```javascript window.addEventListener('wheel'...
当鼠标悬停时，使用`clearInterval`清除定时器；离开时，重新启动定时器。 3. **CSS样式和定位**：为了让内容滚动，我们需要使用CSS来设置元素的定位和溢出。例如，可以设置`overflow`为`hidden`，`position`为`...
- 使用JavaScript控制`demo2`的位置，使其与`demo1`的位置相对移动，从而产生滚动效果。 - 通过定时器（`setInterval`）定期调整`demo2`的位置，实现连续滚动。 ##### 2. HTML结构 HTML部分定义了两个主要的`div`...
3. **定时器和延迟**：使用`setInterval`和`setTimeout`来控制滚动的速度和延迟。通过`setInterval`设置循环滚动的时间间隔，而`setTimeout`则用于设置初始的延迟时间。 4. **滚动位置管理**：通过`o.scrollTop`...
之后，我们可以使用`setInterval()`来定期更新容器的`scrollTop`属性，模拟向下滚动的效果。 ```javascript const commentContainer = document.getElementById('scrolling-comment'); const commentText = '这里...