html设置基础样式，使用js动效做到刷积分的的效果（显示当前时间）

先给大家看一下最终的效果图

1.我们先写基础的html框架，并给其添加上基础的html代码

2.接下来我们开始写js部分代码(这部分是动态效果形成的关键)

1.第一步我们先把需要获取到的元素提前获取到

2.接下来通过定时器setInterval（循环）来写积分刷新的效果

3.大家通过观看上方最终效果图可以发现是列表li做到的效果，又因为在html标签中没有li，所以接下来我们给他添加一个li

4.然后通过innerHTML属性改变li标签中的内容

5.然后接着使用insertBefore属性将我们创建的li插入到ul（父元素）当中

6.因为由效果图可以知道最上方一共刷了多少积分是在不断更新的，所以我们接着往下写

7.这里我们让他到11次的时候提示我们通关，这里就要通过innerText属性修改p标签中的内容

8.这里要注意我们在这个地方给p标签添加了结束文字。我们也要把定时器给清楚，不然就会出现已经提示结束，但定时器还在循环，所以我们就要用到clearTimeout()

9.这里因为我们没有给定时器添加变量名，清除定时器的效果没有办法实现，所以这里给定时器添加一个变量名，并完善清除定时器

3.最终代码

1.我们先写基础的html框架，并给其添加上基础的html代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<p>今天刷了<span>0</span>积分</p>
			
			<ul> </ul>
 
	</body>
</html>

这里写上p标签和ul是为了后面展示效果使用

2.接下来我们开始写js部分代码(这部分是动态效果形成的关键)

1.第一步我们先把需要获取到的元素提前获取到


<script>
			
			    var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
			
				
</script>

2.接下来通过定时器setInterval（循环）来写积分刷新的效果


	<script>
 
            var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				setInterval(function(){
					
					}	
</script>

3.大家通过观看上方最终效果图可以发现是列表li做到的效果，又因为在html标签中没有li，所以接下来我们给他添加一个li


<script>
			
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				sex = setInterval(function(){
					var lis = document.createElement('li')
				},1000)
			</script>

4.然后通过innerHTML属性改变li标签中的内容


<script>
			
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				sex = setInterval(function(){
					var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
				},1000)
			</script>

5.然后接着使用insertBefore属性将我们创建的li插入到ul（父元素）当中


	<script>
			
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				sex = setInterval(function(){
					var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
					uls.insertBefore(lis,uls.firstChild)
					
					
				},1000)
				
			</script>

6.因为由效果图可以知道最上方一共刷了多少积分是在不断更新的，所以我们接着往下写


<script>
				
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				sex = setInterval(function(){
				var lis = document.createElement('li')
				lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
				uls.insertBefore(lis,uls.firstChild)
				sum++
				span.innerText = sum
				
				},1000)
				
			</script>

其实到这里我们已经实现了效果图中的效果，但有一个问题是他在一直加，我们给他一个暂停的条件，这里就要用到if语句


<script>
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				sex = setInterval(function(){
				var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
					uls.insertBefore(lis,uls.firstChild)
					sum++
					span.innerText = sum
					if(sum==11){
						
					}	
				},1000)
				
			</script>

这里我们让他到11次的时候停下来

7.这里我们让他到11次的时候提示我们通关，这里就要通过innerText属性修改p标签中的内容


<script>
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				sex = setInterval(function(){
					var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
					uls.insertBefore(lis,uls.firstChild)
					sum++
					span.innerText = sum
					if(sum==11){
						
						p1.innerHTML = '恭喜你，任务完成'
						
					}	
				},1000)
				
			</script>

8.这里要注意我们在这个地方给p标签添加了结束文字。我们也要把定时器给清楚，不然就会出现已经提示结束，但定时器还在循环，所以我们就要用到clearTimeout()


<script>
			
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
			    setInterval(function(){
				var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
					uls.insertBefore(lis,uls.firstChild)
					sum++
					span.innerText = sum
					if(sum==11){
						clearTimeout()
						p1.innerHTML = '恭喜你，任务完成'
						
					}	
				},1000)
				
			</script>

9.这里因为我们没有给定时器添加变量名，清除定时器的效果没有办法实现，所以这里给定时器添加一个变量名，并完善清除定时器


<script>
				
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				var sex = setInterval(function(){
				var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
					uls.insertBefore(lis,uls.firstChild)
					sum++
					span.innerText = sum
					if(sum==11){
						clearTimeout(sex)
						p1.innerHTML = '恭喜你，任务完成'
						
					}	
				},1000)
				
			</script>

3.最终代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<p>今天刷了<span>0</span>积分</p>
			
			<ul>
				
			</ul>
			
			
			<script>
			
				var p1 = document.querySelector('p')
				var uls = document.querySelector('ul')
				var span = document.querySelector('span')
				var sum = 0
				var sex = setInterval(function(){
					var lis = document.createElement('li')
					lis.innerHTML = '现在的时间是' + new Date().toLocaleString() +'&nbsp;1次'
					uls.insertBefore(lis,uls.firstChild)
					sum++
					span.innerText = sum
					if(sum==11){
						clearTimeout(sex)
						p1.innerHTML = '恭喜你，任务完成'
						
					}	
				},1000)
				
			</script>
	</body>
</html>

给大家看一下效果图

相关阅读:
你好，法语！A2知识点总结（2）
爱普生机器人修改IP
Codeforces-895 (Div3)
【Linux】契子
 【笔记篇】13供应链项目养成记——之《实战供应链》
买充电桩你必须要知道三件事
 python抽取pdf中的参考文献
 C++模板
 卷积神经网络中 6 种经典卷积操作
 解析邮件文本内容； Mime文本解析； MimeStreamParser； multipart解析
原文地址：https://blog.csdn.net/tea_tea_/article/details/125626024