【JS自用案例4】创建设置次数的弹窗

LAM LAB

已于 2023-01-10 14:24:20 修改

阅读量165

点赞数

分类专栏： JavaScript学习文章标签： javascript 前端开发语言

于 2023-01-04 11:43:51 首次发布

本文链接：https://blog.csdn.net/weixin_35944332/article/details/128545523

版权

JavaScript学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

该代码示例展示了如何结合使用定时器(setInterval)和滚动动画(requestAnimationFrame)来逐次加载页面内容，尤其适用于学习新知识点。用户输入滚动次数，程序将按照设定间隔自动滚动页面，直至达到指定次数，提供了一种交互式的学习体验。

摘要由CSDN通过智能技术生成

刷图片时，配合翻页工具，通过指定setInterval的执行次数，让它一次性加载完
新学到的知识点：弹窗设置变量并执行、intervalControl

var timee = 0  ;

scrollToBottom = () => {

  console.log('scrollToBottom now');
  (function smoothscroll() {
    const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    const scrollHeight = document.documentElement.scrollHeight;
  if (scrollHeight - 10 > currentScroll + clientHeight) {
    window.requestAnimationFrame(smoothscroll);
    window.scrollTo(0, currentScroll + (scrollHeight - currentScroll - clientHeight) / 2);
 }
  })();

  timee = timee +1 ;
  console.log(timee)
};


timeSet = prompt("你要我滚多少次:","0");

if (timeSet != 0){
  var intervalControl = setInterval(function(){
	  if( timee == timeSet ){
	    clearInterval(intervalControl);
	  } else {
	    scrollToBottom()
	  }
	  
  },2000);
}else{

  console.log("不干了!")
}