setInterval与clearInterval及scrollTop的使用

最新推荐文章于 2020-12-21 15:41:10 发布
最新推荐文章于 2020-12-21 15:41:10 发布
阅读量325 收藏 1
点赞数
分类专栏： JQuery学习 文章标签： jquery setInterval scrollTop ViewUI
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>
iteye_16140
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
几个例子弄懂JS 的setInterval的运行方式
weixin_30682127的博客
05-10 2542
　　这篇文章主要介绍了js的setInterval方法的用法以及示例，非常的有用，这里推荐给小伙伴们。　 　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 　　setinterval()用法 　　setInterval(code,...
原生js实现滚动新闻一直滚小练习（利用定时器、scrollTop）
几百块的博客
05-24 586
功能：新闻一直滚动，鼠标进入停止，移开继续。 主要利用定时器setInterval和滚动事件的属性： scrollTop(用来表示或设置滚动的内容，被卷上去内容的高度，结果为数值) 效果如下： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
js滚动代码--setInterval的使用
senlin1202的博客
03-04 803
网上不少信息，但是写的比较杂乱，不够精简，不过主题方法都一样，一下是自己理解后自行的一些测试代码 大家可以参考一个网址http://www.cnblogs.com/rubylouvre/archive/2009/10/01/1577219.html写的不错，基本原理都一样   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
定时器setInterval，只执行一次/第一次延迟执行
nann-viiv 的博客
09-29 2560
定时器 setInterbal（function,delayTime） 定时器只执行一次： 需要延迟执行的function中需要添加返回函数： 原js： var t = setInterval(scrollTop(),2500); function scrollTop(){ // ... } 更改： var t = setInterval(scrollTop(),2500); function scrollTop(){ // ... return scrollTop; } 定时器第一次延
setInterval踩坑记
weixin_30632883的博客
08-08 218
在做项目是，回到顶部效果，自己写的代码如下： 1 this.time=setInterval(()=>{ 2 document.documentElement.scrollTop-=500; 3 },20) 4 setTimeout(()=>{ 5 ...
JS实现图片的不间断连续滚动的简单实例
11-24
4. `scrollTop`：设置或获取元素的顶部与视口顶部之间的距离，用于控制垂直滚动。 5. `scrollWidth`：返回元素的总宽度，包括不可见部分。 6. `offsetHeight`：获取元素相对于版面或其父元素的高度。 7. `offsetLeft...
scrollTop原生JavaScript实现的回到顶部库
08-10
IE7及以下版本不支持CSS3的动画，我们可以使用setTimeout模拟平滑滚动效果： ```javascript if (!window.requestAnimationFrame) { backToTopBtn.addEventListener('click', function() { var scrollPosition = ...
CSS scroll-snap滚动事件停止及元素位置检测实现
12-13
**CSS Scroll Snap 滚动事件停止及元素位置检测实现** **一、CSS Scroll Snap 特性介绍** CSS Scroll Snap 是一种强大的前端技术，它允许网页容器在滚动时自动平滑地定位到指定元素的位置，无需JavaScript的干预。...
原生js实现返回顶部缓冲效果
11-29
总结来说，原生JavaScript实现返回顶部缓冲效果的关键在于理解并正确使用`scrollTop`、`clientHeight`和`setInterval`等核心概念。通过这些技术，我们可以创建出既美观又实用的用户体验，提高网站的互动性和用户满意...
JS实现一键回顶功能示例代码
12-10
例如，`setInterval(func, delay)` 定义了一个定时器，每隔`delay`毫秒执行一次`func`函数，直到`clearInterval(intervalID)`被调用。 4. **scrollTo() 方法**： `scrollTo()` 不是原生JavaScript的方法，但在某些...
js实现滚动条自动滚动（scrollTop）
热门推荐
栈木地
02-19 7万+
效果类似于直播网站的评论，会一条接着一条向上 go out ；   js部分很简单：通过控制scrollTop的值来实现自动滚动效果；                         很重要两点：    1、scrollTop的值不可以加单位，谨记！                                                   2、网页缩放比例会影响效果实现（下面具体...
使用JavaScript实现回到顶部效果
xuexueq的博客
04-27 435
锚链接 使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:<a href="#" ></a>,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.功能点 1. 返回顶部的过程是一个由快到慢的滚动过程; 2. 在返回顶部的滚动过程中，如果滚动鼠标滚轮，可暂停在当前位置。 3. 滚动条距离顶部较远时,显示返回顶部按钮,较近时不显
利用JS实现滚动条自动滚动（scrollTop）
qq_24698097的博客
12-21 5434
直接上代码。主要是获取到有滚动效果的元素，然后通过改变scrollTop的值来实现自动滚动效果。interval是setInterval函数的参数，如果想停止滚动可以利用鼠标的mouseOver函数，然后利用clearInterval函数将定时器清除就可以。 function autoScroll(dom, interval) { var parentDom = document.querySelector(dom) //获取滚动元素 initInterval = setInterv.
如何不择手段提升scroll事件的性能
cy5849203的专栏
10-16 3757
如何不择手段提升scroll事件的性能 1. chrome devtool 是诊断页面滚动性能的有效工具 2. 提升滚动时性能，就是要达到fps高且稳。 3. 具体可以从以下方面着手 使用web worker分离无页面渲染无关的逻辑计算 触发监听事件时使用函数节流与函数去抖 使用requestAnimationFrame与requestIdleCallback代替定时器
jq 解决当scroll滚动定位元素抖动问题
林中明月间丶
08-28 7693
var timer = null; $(window).scroll(function () { clearTimeout(timer); timer = setTimeout(function () { //代码... //$login.css('top',($(window).height() - ...
scrollTop回到顶部详解
m0_37068028的博客
10-23 2233
scrollTop回到顶部详解1. scrollTopscrollTop/scrollLeft:滚动条卷去的高度/宽度，这两个属性是可读可写的，它们有边界值(最小值为0，有最大值)。若设置超过边界值，不会生效，它们依旧是边界值 * 最小值：0 * 最大值：ele.scrollHeight - ele.clientHeight2. document.documentElement与document
关于scrollTop的理解以及实现无缝滚动
Y_G_G的博客
12-29 2525
目标：实现数据的自动滚动【无缝滚动】 scrollTop是什么？ 实现无缝滚动 scrollTop是什么？ The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. 元素的scrollTop属性获取或设置【元素内容】垂直滚...
在HTML中，修改以下代码，要求实现所有图片依次循环想上滑动的效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移到到图片，图片向上滑动预览效果</title> <style> #demo img{ height:150px; } #demo{ width: 1000px; overflow: hidden; } </style> </head> <body> <div id="demo"> <table> <tr> <td id="demo1"> <table> <tr> <td><img src="img/1.jpg" alt=""></td> <td><img src="img/2.jpg" alt=""></td> <td><img src="img/3.jpg" alt=""></td> <td><img src="img/4.jpg" alt=""></td> <td><img src="img/5.jpg" alt=""></td> <td><img src="img/6.jpg" alt=""></td> <td><img src="img/7.jpg" alt=""></td> <td><img src="img/8.jpg" alt=""></td> </tr> </table> </td> <td id="demo2"></td> </tr> </table> </div> <script> demo2.innerHTML=demo1.innerHTML; demo.scrollTop=demo1.offsetHeight; function scroll(){ demo.scrollTop-=3; if(demo.scrollTop<=0) demo.scrollTop=demo1.offsetHeight; } var timerId=window.setInterval(scroll,30); demo.onmouseover=function(){ window.clearInterval(timerId); } demo.onmouseout=function(){ timerId=window.setInterval(scroll,10); } </script> </body> </html>
最新发布
06-03
demo.scrollTop = scrollPos; scrollPos += imgHeight; if (scrollPos >= scrollHeight) { scrollPos = 0; demo2.innerHTML = demo1.innerHTML; } } timerId = window.setInterval(scroll, 3000); demo....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值