利用JavaScript刷积分


 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++ :主要记录积分次数。

猜你喜欢

转载自blog.csdn.net/qq_65715980/article/details/125603941
今日推荐