上课随机点名

最新推荐文章于 2023-08-06 18:44:38 发布
最新推荐文章于 2023-08-06 18:44:38 发布
阅读量1.2k 收藏 21
点赞数 5
分类专栏： js css 文章标签： 随机点名
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wrj6811/article/details/102233974
版权
js 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
css
13 篇文章 0 订阅
订阅专栏

效果图：

 页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名表</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <div class="header" style="clear: both">
        <div class="biaoti">
            <span>随机点名</span>
        </div>
        <div class="getname">

        </div>
        <div class="begin">
            <input type="button" id="start" value="开始点名">
            <input type="button" id="end" value="结束点名">
        </div>
        <div class="names" id="dv">
            <ul id="li_name">

            </ul>
        </div>
    </div>
</body>
<script src="../js/common.js"></script>
<script>

    var arr="潘石屹 | 王 石 | 蒋锡培 | 向文波 | 牛根生 | 熊晓鸽 | 王冉 | 于清教 | 谢清海 | 刘旗辉 |刘步尘 | 陈达夫 | 船长 | 叶茂中 |  李士福 | 王进生 | 任志强 | 付伟 | 孙虹钢 | 宋新宇  |王微 | 翁向东 | 周济谱 | 袁岳 | 成君忆 | 艾学蛟 | 雷永军 | 刘秋华 | 宋炜 | 刘东华 |科特勒 | 陈志列 | 张巨峰 | 姚日来 | 李朝曙 | 刘兴亮 | 沧海 | 曾玉 | 姜汝祥 | 徐浩然 | 邓国坚|辜胜阻 | 范以锦 | 郭梓林 | 秦合舫 | 王育琨 | 王辉耀 | 胡奎 | 华仔 | 韩耀国 | 唐清建 |曲向东 | 李志起 | 吴伯凡 | 景素奇 | 贾昌荣 | 林国峰 | 沈坤 | 刘贤方 | 周永亮 | 马向阳 | 辜胜阻 | 范以锦 | 郭梓林 | 秦合舫 | 王育琨 | 王辉耀 | 胡奎 | 华仔 | 韩耀国 | 唐清建 |曲向东 | 李志起 | 吴伯凡 | 景素奇 | 贾昌荣 | 林国峰 | 沈坤 | 刘贤方 | 周永亮 | 马向阳 |熊焰 | 唐崇健 | 王广伟 | 孔繁任 | 刘孝全 | 徐浩然 | 沈青 ";
    var arrName=arr.split("|");
    var flag=true;
    var opacity=10;
    var flag1=true;
    for(var i=0;i<arrName.length;i++){
        var setname=document.createElement("li");
        setname.innerText=arrName[i];
        myId("li_name").appendChild(setname);
    }
    var liObjs= myId("li_name").getElementsByTagName("li");
        myId("start").onclick=function () {
            if (flag){
                b=setInterval('move()',300);
                a=setInterval('checkName()',100);
                c=setInterval('change()',500);
                flag=false;
            }
        }
        myId("end").onclick=function () {
            flag=true;
            clearInterval(a);
            clearInterval(b);
            clearInterval(c);
            myId("dv").style.left=350+"px";
            myId("dv").style.top=130+"px";
            document.getElementsByClassName("names")[0].style.opacity=1;
            // myId("dv").style.zIndex=1;
        }

        function checkName() {
            var num=parseInt(Math.random()*liObjs.length);
            for (var i=0;i<liObjs.length;i++){
                liObjs[i].style.backgroundColor="";
                liObjs[i].style.color="";
            }
            liObjs[num].style.backgroundColor="#f10215";
            liObjs[num].style.color="black";
            document.getElementsByClassName("getname")[0].innerHTML=liObjs[num].innerText;
        }
        function move() {
            var x=parseInt(Math.random()*500+1);
            var y=parseInt(Math.random()*150+1);
            myId("dv").style.left=x+"px";
            myId("dv").style.top=y+"px";
        }
    function change(){
        if(flag1){
            opacity--;
            // if(opacity>0){
            document.getElementsByClassName("names")[0].style.opacity=opacity/10;
            // }
        }
        if(opacity==0){
            flag1=false;
            // opacity=10;
        }
        if(!flag1){
            opacity++;
            document.getElementsByClassName("names")[0].style.opacity=opacity/10;
        }
        if(opacity==10){
            flag1=true;
            // opacity=10;
        }

    }
</script>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
body{
    background-color: pink;
}
.header{
    position: relative;
}
.biaoti{
    width: 200px;
    height: 100px;
    background-color: white;
    margin: 30px auto;
    border-radius: 10px;
    text-align: center;
}
.biaoti span{
    color: grey;
    font-size: 26px;
    line-height: 100px;
    font-weight: inherit;
    text-shadow: 2px 1px 2px #CCCCCC;
}
.getname{
    width: 130px;
    height: 60px;
    background-color: white;
    position: absolute;
    top: 38px;
    right: 456px;
    border-radius: 8px;
    line-height: 60px;
    text-align: center;
    color:black;
    font-size: 26px;
    font-family: 宋体;
    font-weight: bolder;
}
.begin{
    height: 300px;
    width: 100px;
    /*background-color: hotpink;*/
    /*margin: 10px auto;*/
    position: absolute;
    top: 260px;
    right: 233px;
}
#start,#end{
    width: 100px;
    height: 50px;
    font-size:20px;
    background-color:skyblue;
}
#start{
    margin-bottom: 50px;
}
.names{
    width: 800px;
    height: 495px;
    background-color: honeydew;
    /*margin: 20px auto;*/
    text-align: center;
    top: 130px;
    left: 350px;
    position: absolute;
    z-index: -1;
}
.names li{
    float: left;
    margin: 5px 10px;
    width: 80px;
    height:35px;
    line-height: 35px;
    background-color:greenyellow;
    color: #666666;
    font-size: 18px;
    font-weight: normal;
    border-radius: 5px;
}

JS代码：

function myId(id) {
    return document.getElementById(id);
}

主要功能有：点名，随机移动，透明度的使用

学习JS练下手，疯狂百度代码，再加到自己代码里面，难受！！！

 

Wrj6811
关注
专栏目录
课堂随机点名系统（c#源码）
12-14
实现课堂随机点名，简单易用。直接读取文本文件。实现不重复点名。可以查询清空点名记录。可以选择不同点名班级名单。全源码提供。
Python——课堂随机点名
bulbboy的博客
12-05 2674
最近为了在课堂中提高学生的兴趣，使用python写了一个随机点名的小程序，正好python也是学生以后要学习的知识。
课堂随机点名器
11-26
这是偶然从网上下载的来自云南文山县一位penglaoshi设计的课堂随机点名器，简单实用，可以自己修改文本文件里的学生姓名，点名时显示中文名字，学生非常喜欢。注意：两个文件要放在同一个目录下，否则会出错。
课堂随机点名模板
12-04
课堂随机点名，能够轻松实现上课随机点名，而且可以达到不重复
实现课堂随机点名和顺序点名
Catalina
03-08 9188
1. 效果：2. Html代码： <body> <form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onclick="stop()" class="ks"
上课随机点名/抽奖.html
04-07
输入名单，随机抽取数据 可用于老师上课点名或者抽奖啥的 一个简单的html页面，直接用浏览器打开就可以运行
课程设计教师上课随机点名系统.docx
12-25
《教师上课随机点名系统》课程设计 课程设计的目标是构建一个教师上课随机点名的系统，该系统能够帮助教师高效、随机地进行点名，同时记录并管理学生的点名次数。以下是系统的详细知识点： 1. **数据存储**：学生...
python：实现上课随机点名过程
10-16
采用python对学生随机抽取点名提问，运行框显示同学人名，点击开始抽取，点击停止，抽取被选中的同学
上课随机点名神器（.net编写，可以直接双击exe打开）
04-01
总而言之，这个上课随机点名神器是一款实用且易用的.NET应用程序，它的设计和实现涵盖了面向对象编程、图形用户界面设计、随机数生成和音频处理等多个方面的知识。对于.NET开发者来说，无论是作为学习案例还是日常...
校园学生上课随机点名系统
最新发布
07-30
随机点名：按钮或空格键触发，动画显示结果。 公平机制：已点名学生不会重复被选。 已点名列表：网格展示，支持滚动。 语音播报：可开关，读出选中的座号。 视觉效果：五彩纸屑动画，数字变换效果。 点名池管理：可...
课堂（抽奖）随机点名系统
03-30
带声音的随机点名系统，导入txt文件即可使用，使用课堂或者抽奖现场
Excel Vba课堂随机点名程序
02-08
这个资源是我当时写这个程序的代码，进入excel按我的教程http://blog.csdn.net/u012343179/article/details/49833965 做一遍应该得到的是一样的结果。 如果不知道怎么使用这两个文件，可以百度一下。 里面有个word文档，里面的图片链接可能没用了，大家参考教程就行了。
Javascript+html做的班级随机点名
05-24
Javascript+html做的班级随机点名，供大家学习
老师课堂随机点名代码
songJunFeng1的博客
02-04 2195
老师课堂随机点名代码 核心思路：利用Math.random()随机数的方法提取数组中的数据 <body> <div id="md">全班学生：</div> <button>点击随机抽取回答问题</button> <div class="zhong"></div> <script> var arr = ['若烟', '之瑶', '冰露', '谷雪', '李武', '
1024程序节|你知道老师上课随机点名是怎么实现的吗
m0_67388084的博客
10-22 3068
身为程序员的你 ，在老师使用工具随机摇人的时候，你是心里紧张的默念“抽不到我，抽不到我”，还是在琢磨老师的随机点名是如何实现的呢？今天这篇文章将为你揭露点名的“真相”......
JAVA 课堂随机点名（学习笔记）
qq_51948600的博客
01-11 3731
利用java IntelliJ IDEA工具实现随机点名。1.课堂随机点名目的。难点：随机函数的生成。
Python实战案例，tkinter+random模块，实现课堂随机抽选提问并语音播报学生姓名
Modeler_xiaoyu的博客
12-08 1402
今天给大家介绍Python实现课堂随机抽选提问并语音播报学生姓名实战案例，废话不多说直接开整~
课堂随机点名程序
huansdsz的博客
08-06 757
两个随机点名程序，第一个固定班级固定姓名，第二个从文件夹中已有excel文件中获取
随机点名
weixin_45411620的博客
11-09 350
随机点名 阳光明媚的上海今天更个博吧????！ 一、html布局： <table> <tr> <td>王西北</td> <td>贝贝</td> <td>北北</td> <td>北鼻&l...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值