小案例之随机点名系统

  随机点名系统

  近日,本人学习了对象和计时器,就想写一个小案例随机点名系统,这个小案例其实很简单只需要生成随机下标,从数组中取值并运用innerHTML方法将获取到的信息显示到网页上(这里有人会提出疑问,字符串也可以遍历为什么不用字符串呢?原因很简单字符串无法分隔每个名字。)话不多说直接上代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="public.js" type="text/javascript" charset="utf-8"></script>
        <style>
            #name{
                font-size: 60px;
                text-align: center;
                margin: 100px auto;
            }
            #start{
                width: 180px;
                height: 60px;
                border: none;
                background: dodgerblue;
                display: block;
                margin: 0 auto;
                color: #fff;
                font-size: 30px;
                border-radius: 6px;
                text-align: center;
                line-height: 60px;
                cursor: pointer;
            }
            #start:active{
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div id="name">随机点名系统</div>
            <span id="start">点击开始</span>
        </div>
    </body>
    <script type="text/javascript">
        var oName = document.getElementById("name");
        var oStart = document.getElementById("start");
        var names = "霍金,牛顿,爱因斯坦,达尔文,门捷列夫,瓦特,普希金,孔子,老子,庄子";
        var arr = names.split(",");
        // 设置函数
        var time = 1;
        var begin = null;
        oStart.onclick = function() {
            if (time == 1) {
                begin = setInterval(function() {
                    oName.innerHTML = arr[random(0, arr.length - 1)];
                }, 50)
                oStart.innerHTML = "点击结束";
                time = 2;
            } else {
                clearInterval(begin);
                oStart.innerHTML = "点击开始";
                time = 1;
            }

        }
    </script>
</html>

  这里就是随机点名系统的所有代码,接下来就为大家讲解一下代码:

    开始我们先设置DOM结构,很简单的一个大div里面嵌套一个小的div用来放着名字,一个span标签用来设置按钮,关于DOM结构的css,代码中写的很详细可以自己看,这里就不多讲解了。

    接下来进入我的正题js的编写,随机点名系统最关键的两点一个是定时器,一个是会将字符串转成数组在触发定时器的时候可以从中随机取值。

    说到随机取值,就得会写随机数这个函数,由于本人将这类常用的函数写在了公共的js文件中,这里就单独拿出来放在这里(友情提醒各位将常用的函数方法放置在公共类js文件中真的很方便)

function random(a,b){
    return Math.round(Math.random()*(a-b)+b)
}

    这就是产生随机数的函数。

  最开始和大多js一样,先获取各个div和标签的id,然后就是设置名字的字符串,这里用逗号隔开,为了在将字符串转换成数组的时候有参考。

  下面就是声明一个空数组将我们转换过后的数组赋值给空数组,使用的是split方法,这样我们就有名字的数组了。接下来就是如何将名字找到了,因为我们写的是随机点名系统,所以要配合按钮的点击事件写函数。

oStart.onclick = function() {
            if (time == 1) {
                begin = setInterval(function() {
                    oName.innerHTML = arr[random(0, arr.length - 1)];
                }, 50)
                oStart.innerHTML = "点击结束";
                time = 2;
            } else {
                clearInterval(begin);
                oStart.innerHTML = "点击开始";
                time = 1;
            }
        }

    这就是配合点击事件写的函数,因为有开始和结束,所以我们要给开始和结束一个判断,所以这里我声明了一个time,根据time的值是否为1,来判断开始和结束。若if判断语句内的值为true我们就执行定时器函数,函数中我们根据random()方法随机产生0~数组长度-1的数,对应每个名字的下标。将获取到的值通过innerHTML方法传到div中显示到网页上。在运用同样的方法给按钮设置名字。最后将time的值改为2,为了暂停时执行else语句。else中就很简单了,我们只需要将定时器暂停,并把按钮显示的字和time的值改回来就好了。最后我们简单的小案例随机点名系统就写好了。

    以上是本人学习javascript过程中获得的心得,作为一个小白来说难免会有理解不到位的情况,欢迎大家指出。

原文地址:https://www.cnblogs.com/lxylhj/p/11396838.html

时间: 2024-10-06 01:38:05

小案例之随机点名系统的相关文章

用C语言编写一个随机点名系统

/*编写一个随机点名系统,运行该系统后,按空格键可以显示出一名同学,以前被选中的同学,将不会再次被选中*/ #include<stdio.h> #include <stdlib.h> #include<string.h> #include <conio.h> #include <time.h> struct studentinfo { char sNo[5]; char sxueNo[14]; char sname[20]; }st[100];

js随机点名系统

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 background-color: hotpink; 9 } 10 .box{ 11 width: 1000px; 12 height: 240px; 13

随机点名系统

还记得上学的时候被点名的恐惧吗?没办法,刚学完计时器,通过随机点名系统来巩固下知识点,顺便来感受下乐趣!代码奉上! 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-sca

JavaScript实现抖音较火的随机点名系统

前段时间刷抖音,发现一个比较好玩的随机抽查系统,老师可以用它抽查到的名字回答问题,提高课堂活跃度和专注度.今天我用javaScript实现了一个,代码如下!!!可直接粘贴 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="w

Java低配版简单的随机点名系统

import java.util.*; public class Dome{ public static void addSname(String[] students){ Scanner sc = new Scanner(System.in); for(int i=0;i<students.length;i++){ System.out.println("存储第"+(i+1)+"个姓名:"); students[i] = sc.next(); } } pub

JavaScript简单的随机点名系统

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #all { margin-top: 10px; width: 540px; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px

08===跨线程访问之随机点名系统。

3.进程:Process ->方法:1.获取操作系统进程:Process.GetProcess() 2.开始应用程序: Process.Start("程序名","要打开的文件"); 打开网页地址:Process.Start("iexplore.ext","htttp://www.baidu.com"); 3.当程序不是全局类型的时候,程序名要加路径. 4.实例方法:.Thread();.Kill(); 4.线程:Thre

js小案例---1.随机10不重复10数并排序2.一次输入10数并输出和

<script>var array=new Array();for(var i=0;i<10;i++){ array[i]=parseInt(Math.random()*100); for(var j=0;j<=i;j++) { if(parseInt(array[i])==parseInt(array[j])&&i!=j) { --i; } }}for(var i=0;i<10;i++){ for(var j=0;j<=i;j++) { var a;

JavaScript的数组知识案例之随机点名器

本次分享JavaScript主要知识点涉及到for循环.if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 执行后效果图: 思路: 1.网页结构搭建: HTML 2.网页布局美化: CSS 3.随机功能实现: JavaScript 分析后案例思路图: 编码工作: Html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于Jav