我想用网页写一个点名器，你们觉得这个想法怎么样？

最新推荐文章于 2023-04-30 10:29:27 发布

qq_38902844

最新推荐文章于 2023-04-30 10:29:27 发布

阅读量230

点赞数 2

文章标签： js css html

本文链接：https://blog.csdn.net/qq_38902844/article/details/106200556

版权

效果图

在这里插入图片描述

说明

html, css, js代码分别保存在 index.html, index.css, index.js 文件中，而index.css 和 index.js 文件又分别保存在 css 和 js 文件夹下，示意图如下
运行方式：双击index.html 在浏览器中打开即可
运行时，需要先将待分组人员的名单填写/粘贴到右边方框里 (如效果图所示)，人名之间用空格或回车符分开
然后，点击选人按钮，就会在按钮上方出现选中的人名

源代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页点名器</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <div class="select">
            <div class="select_box">
                <ul class="person_list">
                </ul>
    
            </div>
            <button id="select_btn">选人</button>
        </div>
        <div class="data_wrap">
            <h2>请将待选人员的名单粘贴至此处</h2>
            <p>温馨提示：人员姓名之间需要用空格回车等分隔开</p>
            <form action="">
                <textarea id="data" cols="30" rows="13"></textarea>
            </form>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}


body{
    background: rgb(245,245,245);
}
.container{
    width: 1000px;
    height: 500px;
    background: #fff;
    /* 水平垂直居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* 设置圆角 */
    border-radius: 10px;
    overflow: hidden;
}
/* 左半部分 */
.select{
    position: relative;
    float: left;
    width: 500px;
    height: 500px;
    /* background: #ccc; */
    border-right: 1px dashed #eee;
    box-sizing: border-box;
}
.select_box{
    /* 水平垂直居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    width: 200px;
    height: 50px;
    border: 1px solid #000;
    background: pink;
    overflow: hidden;
    
}
.select_box ul{
    overflow: hidden;

    width: 200px;
    position: absolute;
    left: 50%;
    /* top: 0px; */
    margin-top: 0px;
    transform: translateX(-50%);
    transition: 0.5s;

}
.select_box li{
    text-align: center;
    font-size: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    /* background: pink; */
}
.select button{
    position: absolute;
    left: 50%;
    top: 300px;
    transform: translateX(-50%);

    width: 200px;
    height: 50px;
    line-height: 50px;

    outline: none;
    border: none;
    border-radius: 30px;
    background: rgb(255, 103, 0);

    font-size: 20px;
    color: #fff;
    text-align: center;

}
.select button:active,.select button:hover{
    background: rgb(242, 88, 7);
}


/* 右半部分 */
.data_wrap{
    float: right;
    width: 500px;
    height: 500px;
    position: relative;
    /* background: pink; */
}
.data_wrap h2{
    text-align: center;
    margin: 30px 0 10px 0;
}
.data_wrap p{
    display: block;
    width: 320px;
    /* border: 1px solid #000; */
    margin: 0 auto;
    color: #b0b0b0;
    font-size: 14px;
}
/* 文本域 */
#data{
    /* 禁止拖动改变大小 */
    resize: none;
    font-size: 20px;
    font-family: "Microsoft Yahei",sans-serif;
    /* 水平居中 */
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
}

JS代码


// 获取选人按钮
var select_btn = document.getElementById("select_btn");
// 获取人员列表
var list = document.querySelector(".person_list");
// 获取人员名单文本域
var data = document.getElementById("data");

var persons;

window.onload = function(){
    var str = data.value;
    persons = str.split(/\s+/);

    var html = "";
    for(var i=0; i<persons.length; i++){
        if(persons[i] != ""){
            html += "<li>" + persons[i] + "</li>";
        }
    }
    list.innerHTML = html;
    console.log("persons.length="+persons.length);
}

data.onchange = function(){
    var str = data.value;
    persons = str.split(/\s+/);

    var html = "";
    for(var i=0; i<persons.length; i++){
        if(persons[i] != ""){
            html += "<li>" + persons[i] + "</li>";
        }
    }
    list.innerHTML = html;
}

var rand;
var pre=-1;

// 给按钮绑定点击事件
select_btn.onclick = function(){
    var lis = document.querySelectorAll(".person_list li");
    rand = Math.floor(Math.random() * lis.length);
    while(rand == pre){
        rand = Math.floor(Math.random() * lis.length);
    }
    pre = rand;
    list.style.marginTop = -rand*50 + "px";
    console.log(rand);
}

qq_38902844

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
我想用网页写一个点名器，你们觉得这个想法怎么样？

效果图说明html, css, js代码分别保存在 index.html, index.css, index.js 文件中，而index.css 和 index.js 文件又分别保存在 css 和 js 文件夹下，示意图如下运行方式：双击index.html 在浏览器中打开即可运行时，需要先将待分组人员的名单填写/粘贴到右边方框里 (如效果图所示)，人名之间用空格或回车符分开然后，点击选人按钮，就会在按钮上方出现选中的人名源代码HTML代码<!DOCTYPE html&gt
复制链接

扫一扫