javascript从入门到跑路-----小文的js学习笔记（9）------定时器以及图片轮播示例

时间  2020-06-23 标签 javascript 入门 跑路 学习 笔记 定时器 以及 图片 示例

**
javascript从入门到跑路-----小文的js学习笔记（1）---------script、alert、document。write() 和 console.log 标签
…
…
javascript从入门到跑路-----小文的js学习笔记目录javascript

**css

1、定时器:间歇调用

间歇调用：每隔指定的时间就执行一次代码,它会执行无数次html

语法1： setinterval(函数，亳秒)
语法2： function 函数名（）{
                                要执行的代码
                              }java

               setinterval(“函数名（）”，毫秒)
举一个简单的例子：
在这里插入图片描述
即每隔1000毫秒（即一秒）就执行一次内部函数，即会打印不少个小文出来web

2、中止定时器。

中止定时器即清除定时器，他有两种方式：clearTimeout() 与 clearInterval()
语法： clearinterval(中止的定时器)
注：在使用中止定时器前，必定要给前面的定时器命一个名。
那么一样咱们来简单写一下怎么用：
在这里插入图片描述
这里由于定时器刚开启就被咱们直接停用了，因此一次代码也不会执行。即一个小文也不会被打印出来dom

3、超时调用

超时调用：是在指定的时间事后执行代码svg

语法1： setTimeout(函数,亳秒)函数

语法2： function 函数名（）{
                                要执行的代码
                              }学习

               setTimeout(“函数名（）”，毫秒)字体

一样咱们简单举个例子：
在这里插入图片描述
在1秒以后执行一次函数，即只会打印一个小文

案例：

那么下面咱们来作一个简单的案例：点进该网页以后，会出现一个button按钮，可是这个按钮要五秒钟的加载时间，当加载完成以后才能够，继续点击肯定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>bbb</title>
	</head>
	<body>
	<input type="button" value="倒计时开始5" id="btn" />
	<script>
	 var btn = document.getElementById("btn");
	 var num = 5;
	 var timerId = setInterval(function () {
	 num--;
	 btn.value = "再等等" + num;
	 if (num == 0) {
	 clearInterval(timerId);
	 btn.value = "好啦，加载完成了！";
	 }
	 },1000);
	 </script> 
	
	</body>
	
</html>

执行结果：
1在这里插入图片描述2在这里插入图片描述3 在这里插入图片描述

4、图片轮播

在进行案例前咱们来补充几个知识点

1、获取ID元素：document.getElementByld(id名称}.

在这里插入图片描述
在这里插入图片描述
固然这里也能够和事件onclick一块儿来使用
咱们来举个栗子:
在这里插入图片描述
当咱们点击a网站的时候会弹出一个警告的系统弹出框
在这里插入图片描述
在这里插入图片描述
当咱们要给这个div设置颜色等样式的时候除了在css里面添加外，还能够在js里面添加，
由于这里的dom就至关于节点，因此咱们能够进行设置
在这里插入图片描述
那么如此就将这个div的字体颜色设置为了红色，背景颜色设置为了黄色
在这里插入图片描述

2、获取集合元素(标签名称获取)：document.getElementsByTagName(节点名称).

这里咱们以前先为这个页面添加四个li
在这里插入图片描述在这里插入图片描述
当咱们想要获取这些li节点的时候，而且为其设置样式，咱们能够为每个li添加一个id属性而后用document.getElementByld 来获取节点，而后即可以设置样式
在这里插入图片描述
可是若是li一旦过多，就会特别的麻烦，因此这里咱们引入一个新的东西-----document.getElementsByTagName(节点名称).

那么这里咱们就能够用**document.getElementsByTagName(节点名称)**来直接获取这一组数据的节点，而后当咱们要位哪一个li设置单独的样式时能够经过，节点名[数字] 来进行选择设置
ps：[ ] 内数字从0开始，即0 表明第一个li
在这里插入图片描述
可是这样写有一个问题：当咱们的li不少的时候，咱们的工做就会被变多，并且若是当咱们已经设置好以后，忽然再增长两行li，那么新加上的li就不会有该样式，那么这里咱们就能够想一个办法：用到咱们前面学的 if循环控制语句(详情能够去查看小文的js笔记（6）)。

以下写法：不论咱们有多少li，都能被设置该样式，不论后面是否添加新的li也都能被设置一样的样式。
在这里插入图片描述

3、给元素添加样式。

语法： 元素.style.属性名称=值
举个简单的例子：为dom节点的字体设为红色
在这里插入图片描述
那么这里咱们来简单的作一个效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css1.css" />
	<body>
		<div class="box" id="box">
		    <div class="inner">
		        <ul>
		            <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
		            <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
		            <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
		            <li><a href="#"><img src="img/4.jpg" alt=""></a></li>
		            <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
		        </ul>		 
		        <ol class="bar">
		 
		        </ol>
		        <div id="arr">
		                    <span id="left"> < </span>
		            <span id="right"> > </span>	
		        </div>	 
		    </div>
		</div>
		 <script type=“text/javascript” src=“script.js” charset=“utf-8”></script>
	</body>
</html>

执行结果：
在这里插入图片描述
**
下次找时间作一个好的详细的轮播，咱们下次再见
**
ᴼⁿˡʸ ⁱⁿ ᶠʳᵒⁿᵗ ᵒᶠ ᵗʰᵉ ʳᵒᵘᵗᵉ ⁱˢ ᵃᵗᵗᵃᶜʰᵐᵉⁿᵗ ⁱˢ ʷᵒʳᵗʰ ˡᵒᵒᵏⁱⁿᵍ ᶠᵒʳʷᵃʳᵈ ᵗᵒ.                            ----------来路无可眷恋，值得期待的只有前方。

联系我们 沪ICP备13005482号-10