"张艺兴", "鹿晗", "TFBOYS", "李易峰", "吴亦凡", "马天宇", "黄子韬", " 杨洋", "井柏然", "胡歌", "陈坤"
上面一组名字,怎样实现随机一个名单在页面显示。
通过上面的描述我们大概可以推论出几个关键点:
1、一组名字;
2、随机生成;
3、一个名字;
4、写入页面。
那么我们一步一步分析怎么实现。
一组名字
那我们是不是可以把这一组名字组成一个数组,把每个名字作为数组的一个元素。
var listName = ["张艺兴", "鹿晗", "TFBOYS", "李易峰", "吴亦凡", "马天
宇", "黄子韬", " 杨洋", "井柏然", "胡歌", "陈坤"];
一个名字
这里的一个名字我们可以通过上面数组的索引值去找到这个名字,那么现在就需要研究一个索引值。
listName[index];
随机生成
这个随机生成指的是随机生成的索引值。
那么我们首先需要一个从0开始长度为数组长度的数值,并且取出他们中的随机数。
Math.floor(Math.random() * (listName.length) + 0);//向下取整就能实现从0开始
写入页面
首先在body里写入一个标签,我这里用的h2标签,然后在 <script>里面实现写入
var h = document.getElementsByTagName('h1')[0];//通过节点名获取这个节点
h.innerHTML = listName[Math.floor(Math.random() * (listName.length)
+ 0)];
//把这个节点写入上面的内容;
全部代码就是:
<body>
<h2 ></h2>
<script>
setInterval(function () {
var h = document.getElementsByTagName('h2')[0];
var listName = ["张艺兴", "鹿晗", "TFBOYS", "李易峰", "吴亦
凡", "马天宇", "黄子韬", " 杨洋", "井柏然", "胡歌", "陈坤"];
h.innerHTML = listName[Math.floor(Math.random() *
(listName.length) + 0)];
}, 1000);
</script>
</body>
这样就可以实现一秒随机生成一个名单里的人名,希望觉得有帮助的小伙伴点个赞,谢谢!