抽学号集合-CSDN博客

抽学号集合

用Python，HTML，PHP/C语言/VB.NET 实现

Python，HTML已验证可用

Python：

用Python写抽学号，网页上，端口9999，有两种功能，单出（d）即点击按钮随机出现一个学号，不停快速随机出（s），点击按钮开始/停止，学号的数字250大小字号访问如127. 0. 0. 1：9999/d/1-42 是模式1下在1-42抽学号，如127. 0. 0. 1：9999/s/1-40是在模式2下抽学号1-40，后面的数字学号区间可以是任意的在/s/<start>-<end>和/d/<start>-<end>下有按钮和文本框路由/d/<start>-<end>和 /s/<start>-<end> 分别用于单次抽取和快速抽取学号的页面。路由 /d/<start>-<end>/number 和 /s/<start>-<end>/number分别用于从服务器获取单个随机学号和快速抽取的学号。

from flask import Flask, jsonify, render_template_string
from random import randint
import threading
import time
import sys
import pystray
from pystray import MenuItem as item
from PIL import Image, ImageDraw

app = Flask(__name__)
port = 9999

html_template_single = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单次抽取学号</title>
    <style>
        body { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
            font-family: Arial, sans-serif; 
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
        }
        .number {
            font-size: 250pt; 
            width: 100%; 
            text-align: center; 
            border: none; 
            margin-bottom: 20px; 
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button { 
            font-size: 1.5rem; 
            padding: 10px 20px; 
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <input id="number" class="number" type="text" value="-" readonly />
        <br>
        <button οnclick="drawNumber()">抽取学号</button>
    </div>
    <script>
        async function drawNumber() {
            const response = await fetch('/d/{
   
   { start }}-{
   
   { end }}/number');
            const data = await response.json();
            document.getElementById('number').value = data.number;
        }

        window.onload = function() {
            drawNumber();  // Initial draw to populate the text box
        };
    </script>
</body>
</html>
"""

html_template_continuous = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速抽取学号</title>
    <style>
        body { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
            font-family: Arial, sans-serif; 
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
        }
        .number {
            font-size: 250pt; 
            width: 100%; 
            text-align: center; 
            border: none; 
            margin-bottom: 20px; 
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button { 
            font-size: 1.5rem; 
            padding: 10px 20px; 
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <input id="number" class="number" type="text" value="-" readonly />
        <br>
        <button οnclick="toggleContinuous()">开始/停止快速抽取</button>
    </div>
    <script>
        let intervalId = null;
        let isContinuous = false;

        async function drawNumber() {
            const response = await fetch('/s/{
   
   { start }}-{
   
   { end }}/number');
            const data = await response.json();
            document.getElementById('number').value = data.number;
        }

        async function toggleContinuous() {
            if (isContinuous) {
                clearInterval(intervalId);
                isContinuous = false;
            } else {
                isContinuous = true;
                intervalId = setInterval(async () => {
                    drawNumber();
                }, 100);
            }
        }

        window.onload = function() {
            drawNumber();  // Initial draw to populate the text box
        };
    </script>
</body>
</html>
"""

@app.route('/d/<int:start>-<int:end>/number')
def draw_single_number(start, end):
    number = randint(start, end)
    return jsonify(number=number)

@app.route('/s/<int:start>-<int:end>/number')
def draw_continuous_number(start, end):
    number = randint(start, end)
    return jsonify(number=number)

@app.route('/d/<int:start>-<int:end>')
def draw_single_page(start, end):
    return render_template_string(html_template_single, start=start, end=end)

@app.route('/s/<int:start>-<int:end>')
def draw_continuous_page(start, end):
    return render_template_string(html_template_continuous, start=start, end=end)

@app.route('/')
def index():
    return "请访问 /d/<start>-<end> 或 /s/<start>-<end> 来查看抽取学号的页面。"

def create_image():
    # Create an image with a solid color
    width = 64
    height = 64
    image = Image.new('RGB', (width, height), color=(73, 109, 137))
    draw = ImageDraw.Draw(image)
    return image

def quit_app(icon, item):
    icon.stop()
    sys.exit(0)

def start_tray():
    image = create_image()
    menu = (item('Quit', quit_app),)
    icon = pystray.Icon("test", image, "Flask App", menu)
    icon.run()

if __name__ == '__main__':
    threading.Thread(target=start_tray).start()
    app.run(host='0.0.0.0', port=port)

HTML:

代码（头部注释有详解如何使用）

头部注释：
首页布局：

用户可以输入学号的开始和结束值，并选择抽取模式。
点击“确定”按钮后跳转到相应的页面。

抽取页面布局：

根据选择的模式，显示相应的按钮（单次抽取或快速抽取）。
使用JavaScript进行学号抽取。

JavaScript：

getRandomNumber(start, end)：生成随机学号的函数。
drawNumber()：单次抽取学号的功能。
toggleContinuous()：开始/停止快速抽取学号的功能。
navigate()：根据输入的学号区间和模式，跳转到相应的页面，并通过查询参数传递。
initialize()：初始化页面，检查URL查询参数并根据模式和区间跳转到相应页面。

使用方法：

将上述代码保存到一个HTML文件，例如 index.html。
在浏览器中打开该文件即可使用。

功能：

用户可以在首页选择学号区间和模式，然后点击按钮跳转到相应的界面进行学号抽取。
用户可以直接在地址栏中输入 /index.html?mode=d&start=startnumber&end=endnumber 或 /index.html?mode=s&start=startnumber&end=endnumber 形式的URL来直接跳转到相应的抽取页面。


<!--
说明
首页布局：
- 用户可以输入学号的开始和结束值，并选择抽取模式。
- 点击“确定”按钮后跳转到相应的页面。

抽取页面布局：
- 根据选择的模式，显示相应的按钮（单次抽取或快速抽取）。
- 使用JavaScript进行学号抽取。

JavaScript：
- getRandomNumber(start, end)：生成随机学号的函数。
- drawNumber()：单次抽取学号的功能。
- toggleContinuous()：开始/停止快速抽取学号的功能。
- navigate()：根据输入的学号区间和模式，跳转到相应的页面，并通过查询参数传递。
- initialize()：初始化页面，检查URL查询参数并根据模式和区间跳转到相应页面。

使用方法
1. 将上述代码保存到一个HTML文件，例如 index.html。
2. 在浏览器中打开该文件即可使用。

功能
1. 用户可以在首页选择学号区间和模式，然后点击按钮跳转到相应的界面进行学号抽取。
2. 用户可以直接在地址栏中输入 /index.html?mode=d&start=startnumber&end=endnumber 或 /index.html?mode=s&start=startnumber&end=endnumber 形式的URL来直接跳转到相应的抽取页面。
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽取学号</title>
    <style>
        body {
     
      
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
            font-family: Arial, sans-serif; 
            background-color: #f0f0f0;
        }
        .container {
     
     
            text-align: center;
        }
        .number {
     
     
            font-size: 250pt; 
            width: 100%; 
            text-align: center; 
            border: none; 
            margin-bottom: 20px; 
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button {
     
      
            font-size: 1.5rem; 
            padding: 10px 20px; 
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
     
     
            background-color: #0056b3;
        }
        input, select {
     
     
            font-size: 1rem;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="index-page">
            <h1>选择学号区间和模式</h1>
            <label for="start">开始学号：</label>
            <input type="number" id="start" value="1">
            <br>
            <label for="end">结束学号：</label>
            <input type="number" id="end" value