JavaScript刷积分实现效果图
利用JS刷积分,主要利用定时器循环来执行积分的累计。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刷积分</title>
</head>
<body>
<p>今天刷了<span>1</span>积分</p>
<ul></ul>
html内容主要用于刷积分的文字显示。
ul标签主要为后面在js中为ul标签里添加li标签。
<script>
var ul = document.querySelector('ul');
var span = document.querySelector('span');
var num = 1;
获取html中的元素,num为了后面累计积分而定义。
setInterval(time,1000);
function time(){
var date = new Date().toLocaleString();
var li = document.createElement('li');
setInterval:用来定义循环定时器,time调用后面函数,1000表示,每1000毫秒循环执行一次(1000毫秒=1秒)。
new Date获取当前时间,toLocaleString:当前时间的一种表达方式。
createElement("li"):表示创建一个li节点。
li.innerText = "时间" + date +' '+ 1 + "积分";
ul.appendChild(li);
span.innerText = num;
num++;
}
</script>
</body>
</html>
li.innerText:在li元素里修改它的文本内容。
appendChild(li):在里元素中添加li.innerText中修改的内容。
span.innerText 和 num++ :主要记录积分次数。