JS轮播图setInterval,定时弹出广告setTimeout,获取标签中的内容innerHTML

最新推荐文章于 2022-10-29 14:59:23 发布
最新推荐文章于 2022-10-29 14:59:23 发布
阅读量141 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44063001/article/details/87713294
版权

定时器setInterval(循环定时)

window.setInterval(code,millisec);
	code:代码段
		a. "正常js代码"
		b. 函数名
	millisec:时间间隔,单位是毫秒

在这里插入图片描述

定时器setTimeout(只有一次)

window.setTimeout(code,millisec);
		code:代码段
			a. "正常js代码"
			b. 函数名
		millisec:时间间隔,单位是毫秒

小练习----用setTimeout定时扩大正方形大小

<script type="text/javascript">		
	
		//设置加载事件
		window.function(){
			//设置定时
			window.setTimeout(test,2000)
		}
		//
		function test(){
			//获取标签
			var Element=document.getElementById("test");
			//获取宽和高
			var w=Element.style.width;
			var h=Element.style.height;
			//转换成int类型
			w=parseInt(w);
			h=parseInt(h);
			//X2
			w *=2;
			h *=2;
			//再次设置
			Element.style.width=w+"px";
			Element.style.height=h+"px";
		}
		
	</script>

小练习----定时弹出广告

<script type="text/javascript">	
	//设置加载事件
	window.function (){
		window.setTimeout(ad,2000);
	}
	//显示广告
	function ad(){
		//获取标签
		var ad=document.getElementById("ad");
		//设置成块级元素就显示出来了
		ad.style.display="block";
		//再设置一个定时器,隐藏广告
		window.setTimeout(yincang,2000);
	}
	//隐藏广告
	function yincang(){
		//获取标签
		var ad=document.getElementById("ad");
		//设置dispaly为none值
		ad.style.display="none";
	}	
</script>


<body>
				//预设为隐藏
				<img id="ad" src="../img/ad.jpg" width="100%" style="display: none;"/>

</body>

innerHTML:获取标签中的内容(<P>内容</P>)

小练习—定时更改标签中的内容

<script type="text/javascript">
		
		window.function(){
			window.setTimeout(test,2000);
		}
		
		function test(){
			
			var test=document.getElementById("test");
			test.innerHTML="再见";
		}
	</script>



<body>
	<p id="test">你好</p>
</body>
大雄的哆啦A梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现广告弹出setInterval()
weixin_59912996的博客
04-12 938
注释已写。 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // java习惯，主方法调用 function init(){ // s
JS小功能(setInterval实现图片效果显示时间)实例代码
10-26
主要介绍了setInterval实现图片效果显示时间实例代码，有需要的朋友可以参考一下
js中SetInterval与setTimeout用法
Theo_Yuf1012的博客
03-30 352
JS里设定延时： 使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。 setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复，setTimeout不会重复。 clearTime...
【JS】# 关闭定时器setInterval、实现公告左右轮播、获取每月最大的天数、如何跳出forEach循环
最新发布
LRcoding
10-29 752
关闭定时器setInterval 实现公告左右轮播 获取每月最大的天数 如何跳出forEach循环
利用setTimeout延时器 制作广告自动关闭
weixin_30609331的博客
09-03 150
模仿广告自动关闭效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用setTimeout延时器 制作广告自动关闭</title> <styl...
为什么setInterval外边获取不到标签元素，在内部却可以获取到？
microcosmv的博客
02-21 741
学习过程中遇到了这个问题，最后发现是因为body写在了script后边，加载页面的时候，首先加载script，这时直接获取元素当然是null。 但是为什么setInterval里却可以获取到呢？ 答：这是因为setInterval的代码是在设置的时间到了之后才去执行第一次，这时候body标签中的元素已经加载完成，所以可以正常获取得到。 PS:其实很多时候一不小心就犯了这样的毛病，代码的先后顺
定时器原理关闭广告
zuo_zuo_blog的博客
04-13 297
定时器 setInterval()循环定时器 ，周而复始的执行 setTimeout()炸弹定时器，用完以后报废 var num=0; setInterval(function () { console.log(num); num++; },1000); 1.五秒关闭广告 <script> window.function () { ...
0.51版本 react-native 基于setinterval轮播广告用法 最后一张照片无缝连接
qq_41284481的博客
04-04 571
1.js内容import React,{Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput, ScrollView, } from 'react-native'; var ImageData=require('./data.json'); va...
setInterval设置停止和循环
weixin_34014277的博客
10-10 237
原文链接：http://caibaojian.com/setinterval-times.html 需要知道已经经过了多少次或者说过多久就会停止 var timesRun = 0; var interval = setInterval(function(){ timesRun += 1; if(timesRun === 60){ clearInterva...
JS如何获取A标签里面的链接属性
热门推荐
EASYBOOR
08-17 1万+
<br /><br /><script type="text/javascript"><br />function dd(){<br />//document.getElementById ('zhang').getElementsByTagName ("a").href = "http://www.easyboor.com"<br />//document.getElementsByTagName("a").href="http://www.w3school.com.cn";<br />var c
定时器setTimeout()、setInterval()详解
风动之石的专栏
10-17 1万+
JavaScript 标准参考教程（alpha） 浏览器对象 定时器 GitHub  TOP  定时器 来自《JavaScript 标准参考教程（alpha）》，by 阮一峰 目录
html用div布局显示时间，并且实时刷新
背着饭碗的小猿
08-17 2456
完整代码如下 <!DOCTYPE html> <meta charset="UTF-8"> <!--中午乱码解决方式--> <html lang="en"> <title>定时刷新时间</title> <div class="showTime">当前时间：2021年3月12-23时34分15秒</div> <script> var date = null; date = setTim
mpvue在退出当前页面时关闭setInterval
weixin_41683949的博客
11-27 659
mpvue在退出当前页面时关闭setInterval 最近开发秒杀功能利用setInterval自定义了一个倒计时器，当倒计时到零时清除计时器，如果时间太长还没有倒计完就跳出页面，setInterval还是会执行，所以我们最好在跳出页面时也把计时任务清除掉，很简单，就是利用mpvue的生命周期函数和clearInterval，分两种情况。 一、利用navigateBack返回上一页，可以在onUnload中关闭 onUnload() { clearInterval(this.timer);
html5 settimeout,计时器setTimeout()
weixin_33289873的博客
06-20 1872
setTimeout(代码,延迟时间);参数说明：1. 要调用的函数或要执行的代码串。2. 延时时间：在执行代码前需等待的时间，以毫秒为单位(1s=1000ms)。当我们打开网页3秒后，在弹出一个提示框，代码如下:setTimeout("alert('Hello!')", 3000 );当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。function tinfo...
js-图片轮播和切换(定时器setInterval()和setTimeout())
zhang_ntmare的博客
11-12 1373
js图片轮播和切换 前两去看js和jq知识框架去了，没有写博客，总感觉少了点什么，看的差不多了今天动动手 本次实例涉及到的知识点： jq选择器，定时器，js点击事件，setInterval()/setTimeout()定时器，js选择器，switch语句 效果图： 点击play，进行轮播，顺序从第一张到第五张，back返回第一张图，下面的数字点击分别切换队形位置的图片 思路： 1、img，button*6，绑定点击事件 2、定时器进行轮播 遇到的问题： 1、点击切换对应图片 开始想法比较简单，分别给每个按钮
原生js实现轮播图-setInterval, setTimeout
莫兮的博客
03-03 531
原生js实现轮播图-setInterval, setTimeout 目录 文章目录前言代码实现`setTimeout`和递归实现`setInterval`效果展示 前言 利用原生js实现轮播图 代码复制可用 代码实现 setTimeout和递归实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
js停止setInterval函数的运行
localhost
11-17 1587
在某些情况下，我们需要用到setInterval函数，让某方法在每隔固定时间段后自动执行。 可满足某些条件后我们需要将其终止，不再运行，做法如下： [code="js"] Auto=window.setInterval("InsertAutoPage();",1000); [/code] 这里要注意"Auto"是给该setInterval函数的命名，之后要通过这个来终止。 [code=...
HTML、CSS与JavaScript核心标签详解
- `setTimeout()`和`setInterval()`：实现定时执行函数。 - `XMLHttpRequest`或`fetch API`：进行异步数据请求。 HTML、CSS和JavaScript三者结合，可以创建功能丰富的、具有交互性的网页。了解并熟练掌握这些标签和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值