想做一个这种的 有会的么

img

当前时间:2021年4月21日星期三 10:32(
动态变化的时间)
早上好:(随时间变化的提示语)
文本校验框
姓名:(判断不为空)
密码:随机生成8位密码
性别:
(默认选择自己的性别)
年龄:(判断必须是数字)
所在城市:下来菜单
爱好:4个以上选项(多选)
提交按钮 重置按钮(点提交按钮后出现拼接
提示,如:张三 您好,您的密码是x,您的
所在城市为x,年龄是20,您的爱好是x
x
, x*。)
请提交两张图片,以图片形式插入,一张效

基于new bing 加以修改的编写,你直接复制代码就可以用:

img

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>

    <style>
        #container {
        width: 800px;
        margin: auto;
        text-align: center;
    }

    form {
        text-align: left;
    }

    </style>
</head>
<body>
    <div id="container">
        <h1><span id="current-time"></span><span id="greetings"></span></h1>
        <form id="my-form">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required><br><br>
            <label for="password">密码:</label>
            <input type="text" id="password" name="password"><br><br>
            <label for="gender">性别:</label>
            <input type="radio" id="male" name="gender" value="male" checked><label for="male"></label>
            <input type="radio" id="female" name="gender" value="female"><label for="female"></label><br><br>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" min="1" required><br><br>
            <label for="city">所在城市:</label>
            <select id="city" name="city">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select><br><br>
            <label for="hobbies">爱好:</label>
            <input type="checkbox" id="hobby1" name="hobbies" value="reading"><label for="hobby1">阅读</label>
            <input type="checkbox" id="hobby2" name="hobbies" value="sports"><label for="hobby2">运动</label>
            <input type="checkbox" id="hobby3" name="hobbies" value="music"><label for="hobby3">音乐</label>
            <input type="checkbox" id="hobby4" name="hobbies" value="traveling"><label for="hobby4">旅游</label>
            <input type="checkbox" id="hobby5" name="hobbies" value="photography"><label for="hobby5">摄影</label><br><br>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </div>
    

    <script>
        // 获取当前时间
function getCurrentTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const day = now.getDay();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    let dayText;
    switch (day) {
        case 0:
            dayText = "星期日";
            break;
        case 1:
            dayText = "星期一";
            break;
        case 2:
            dayText = "星期二";
            break;
        case 3:
            dayText = "星期三";
            break;
        case 4:
            dayText = "星期四";
            break;
        case 5:
            dayText = "星期五";
            break;
        default:
            dayText = "星期六";
            break;
    }

    return `${year}${month}${date}${dayText} ${hours}:${minutes}:${seconds}`;
}

// 获取问候语
function getGreetings() {
    const now = new Date();
    const hours = now.getHours();
    if (hours >= 6 && hours < 12) {
        return "早上好!";
    } else if (hours >= 12 && hours < 18) {
        return "下午好!";
    } else if (hours >= 18 && hours < 24) {
        return "晚上好!";
    } else {
        return "您好!";
    }
}

// 生成随机密码
function generatePassword() {
    let password = "";
    const characters = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    for (let i = 0; i < 8; i++) {
        password += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return password;
}

// 获取用户输入并拼接提示信息
function getPrompt() {
    const name = document.getElementById("name").value.trim();
    const password = generatePassword();
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const age = Number(document.getElementById("age").value.trim());
    const city = document.getElementById("city").value;
    const hobbies = [];
    document.querySelectorAll('input[name="hobbies"]:checked').forEach(element => hobbies.push(element.value));
    const hobbiesText = hobbies.join("、");
    const prompt = `${name}您好,您的密码是${password},您的所在城市为${city},年龄是${age},您的爱好是${hobbiesText}。`;
    return prompt;
}

// 在页面加载完成后初始化
window.onload = function() {
    // 更新当前时间和问候语
    const currentTimeSpan = document.getElementById("current-time");
    currentTimeSpan.innerHTML = getCurrentTime();
    setInterval(() => {
        currentTimeSpan.innerHTML = getCurrentTime();
    }, 1000);
    document.getElementById("greetings").innerHTML = getGreetings();

    // 绑定表单提交事件
    const form = document.getElementById("my-form");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        alert(getPrompt());
    });

    // 绑定重置按钮点击事件
    const resetButton = document.querySelector('input[type="reset"]');
    resetButton.addEventListener("click", function() {
        document.getElementById("name").focus();
    });
}

    </script>
</body>
</html>


img

这个不是跟前两天js一样的吗。你可以先写一点html给我们,js我们来弄

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
    <script type="text/javascript">
        function checkForm() {
            var name = document.getElementById("name").value;
            var password = Math.random().toString(36).substring(2, 10);
            var gender = document.querySelector('input[name="gender"]:checked').value;
            var age = document.getElementById("age").value;
            var city = document.getElementById("city").value;
            var hobby = "";
            var checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
            for (var i = 0; i < checkboxes.length; i++) {
                hobby += checkboxes[i].value + ",";
            }
            hobby = hobby.substring(0, hobby.length - 1);
            var message = name + " 您好,您的密码是 " + password + ",您的所在城市为 " + city + ",年龄是 " + age + ",您的爱好是 " + hobby + "。";
            alert(message);
            return false;
        }
        function updateTime() {
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var time = hour + ":" + minute + ":" + second;
            document.getElementById("time").innerHTML = time;
            if (hour < 12) {
                document.getElementById("greeting").innerHTML = "早上好:";
            } else if (hour < 18) {
                document.getElementById("greeting").innerHTML = "下午好:";
            } else {
                document.getElementById("greeting").innerHTML = "晚上好:";
            }
        }
        setInterval(updateTime, 1000);
    </script>
</head>
<body>
    <p>当前时间:<span id="time"></span></p>
    <p id="greeting"></p>
    <form onsubmit="return checkForm()">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>


        <label for="password">密码:</label>
        <input type="text" id="password" name="password" readonly>


        <label for="gender">性别:</label>
        <input type="radio" id="male" name="gender" value="男" checked>
        <label for="male"></label>
        <input type="radio" id="female" name="gender" value="女">
        <label for="female"></label>


        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" required>


        <label for="city">所在城市:</label>
        <select id="city" name="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>


        <label for="hobby">爱好:</label>
        <input type="checkbox" id="hobby1" name="hobby" value="游泳">
        <label for="hobby1">游泳</label>
        <input type="checkbox" id="hobby2" name="hobby" value="跑步">
        <label for="hobby2">跑步</label>
        <input type="checkbox" id="hobby3" name="hobby" value="旅游">
        <label for="hobby3">旅游</label>
        <input type="checkbox" id="hobby4" name="hobby" value="唱歌">
        <label for="hobby4">唱歌</label>


        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>


基础技术就是HTML+css+JavaScript
建议先简单画出页面,校验等等先不用实现,把基础的界面写出来,然后再一步一步进行各个控件的实现

这有啥不会的,直接上代码,你复制到html文件中,运行试试:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Javascript第一次作业</title>
  <style>
    * {
      box-sizing: border-box;
    }
    .header, .footer {
      width: 100%;  
      background: gray;
    }
    .content {
      width: 80%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="time"></div> 
  <header class="header"></header>
  <div class="content">
    <p>你好!</p>   
    <form>
      <p>姓名:<input type="text" name="name" required></p>
      <p>密码:<input type="text" id="pwd"></p>
      <p>性别:
          <label><input type="radio" name="gender" value="male" checked></label>
          <label><input type="radio" name="gender" value="female"></label>
      </p>
      <p>年龄:<input type="number" name="age" required></p>
      <p>所在城市:
          <select name="city">
              <option value="1">北京</option>  
              <option value="2">上海</option>
              <option value="3">广州</option>  
              <option value="4">深圳</option>  
          </select> 
      </p>
      <p>爱好:
          <input type="checkbox" name="hobby" value="运动" checked> 运动
          <input type="checkbox" name="hobby" value="音乐"> 音乐  
          <input type="checkbox" name="hobby" value="旅游"> 旅游
          <input type="checkbox" name="hobby" value="阅读"> 阅读
      </p>
    <div>
        <input type="submit" value="提交">                              
                                                                
        <input type="reset" value="重置">
    </div>  
    </form>
  </div>
  <p></p>
  <footer class="footer"></footer>
</body>
<script>  
function getTime(){
    var now = new Date();
    var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var ampm = ["上午", "下午"]; 
    var ampmHour = now.getHours() ;  
    var ampmCheck= ampmHour >= 12 ? "下午" : "上午";   
    return "当前时间:" + now.getFullYear() + "年" + (now.getMonth() + 1) + "月"   
                        + now.getDate() + "日 " 
                       + ampmCheck + " "  
                       + now.getHours() + ":"  
                       + now.getMinutes();       
}
setInterval(function(){
    document.getElementById("time").innerHTML = getTime();  
}, 1000);



let greetText = document.querySelector('p');  

function setGreetText() {  
  let now = new Date();
  let hour = now.getHours();
  if (hour < 11) {
    greetText.innerHTML = '早上好';
  } else if (hour < 15) {
    greetText.innerHTML = '中午好';
  } else if (hour < 19) {
    greetText.innerHTML = '下午好';
  } else {
    greetText.innerHTML = '晚上好';
  }
}
setInterval(setGreetText, 1000);   


// 重置按钮点击事件
let resetBtn = document.querySelector('input[type="reset"]');
resetBtn.addEventListener('click', function() {
  alert('重置成功!');
  document.querySelector('form').reset();
});

// 提交按钮点击事件  
let submitBtn = document.querySelector('input[type="submit"]');
submitBtn.addEventListener('click', function() {
  let name = document.querySelector('input[name="name"]').value;
  let pwd = document.querySelector('input[id="pwd"]').value;
  let city = document.querySelector('select[name="city"]').value;
  let age = document.querySelector('input[name="age"]').value;
  let hobbies = [];
  document.querySelectorAll('input[name="hobby"]:checked').forEach(item => {
    hobbies.push(item.value);
  });
  let hobbyStr = hobbies.join('、');
  
  let greetText = `${name} 您好,您的密码是${pwd},您的所在城市是${city},年龄是${age},您的爱好是${hobbyStr}。`;
  alert(greetText);
});
let nameInput = document.querySelector('input[name="name"]');
let pwdInput = document.querySelector('input[id="pwd"]');

nameInput.addEventListener('change', function() {
  pwdInput.value = Math.random().toString().slice(2, 10); 
}); 
</script>

</html>

如果可以,请直接采纳,如果有需要修改的地方,可以直接联系我改就行。

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7497818
  • 除此之外, 这篇博客: 2020华数杯C题脱贫帮扶绩效评价你怕了吗?中的 问题二:160 个帮扶单位帮扶着基础不同的村庄,帮扶单位帮扶工作的态度、目标、投入、帮扶干部素质等显然是有差异的。仅仅用 2020 年各村庄评分高低显然是无法真正有效的体现一个帮扶单位在脱贫攻坚提升方面所做出的努力。请你运用附件的数据,阐明什么类型的帮扶单位,哪些帮扶单位在脱贫帮扶上面有较高的绩效?请给不同类型的帮扶单位绩效排序,给出脱贫帮扶绩效前十名的帮扶单位编号。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 基本思路是:构造指标-计算各指标的权重-TOPSIS法进行评价
    为了有效凸显出五年来帮扶单位在脱贫攻坚提升方面所作出的努力,计算了各指标的增长率,即

    2020_SR/2015_SR,2020_CY/2015_CY,……,2020_ZF/2015_ZF
    主成分分析法是一种线性无监督的降维方法,可以通过主成分分析法计算各指标方差贡献率,以此作为各指标的权重。接着采用TOPSIS法进行评价,TOPSIS法是一种常用的组内综合评价方法,能充分利用原始数据的信息,其结果能精确地反映各评价方案之间的差距。基本过程为基于归一化后的原始数据矩阵,采用余弦法找出有限方案中的最优方案和最劣方案,然后分别计算各评价对象与最优方案和最劣方案间的距离,获得各评价对象与最优方案的相对接近程度,以此作为评价优劣的依据。该方法对数据分布及样本含量没有严格限制,数据计算简单易行。

    #构造评价指标
    data_2 = pd.DataFrame(data.pivot_table(index=['帮扶单位(0-159)','村庄编号','帮扶单位类型(0-5)'],values=columns)).reset_index()
    for j in range(6):
        data_2['{}_增长率'.format(j)] =  data_2.iloc[:,9+j]/data_2.iloc[:,j+3]
        
    data_2 = data_2.drop(['帮扶单位(0-159)','村庄编号','帮扶单位类型(0-5)'],axis=1).drop(columns,axis=1)
    c = ['CY_增长率','HJ_增长率','SR_增长率','SS_增长率','WJ_增长率','ZF_增长率']
    data_2.columns = c
    
    # 数据归一化
    def Standard(data):
        return (data - data.min())/(data.max()-data.min())
    data_2 = Standard(data_2)
    
    # PCA计算指标权重
    from sklearn.decomposition import PCA
    from sklearn import preprocessing
    pca = PCA(n_components=6)
    pca.fit_transform(data_2)
    weight = pca.explained_variance_ratio_  #方差贡献率
    print(weight)
    
    def topsis(data, weight):
        # 最优最劣方案
        Z = pd.DataFrame([data.min(), data.max()], index=['负理想解', '正理想解'])
        # 距离
        Result = data.copy()
        Result['正理想解'] = np.sqrt(((data - Z.loc['正理想解']) ** 2 * weight).sum(axis=1))
        Result['负理想解'] = np.sqrt(((data - Z.loc['负理想解']) ** 2 * weight).sum(axis=1))
        # 综合得分指数
        Result['综合得分指数'] = Result['负理想解'] / (Result['负理想解'] + Result['正理想解'])
        Result['排序'] = Result.rank(ascending=False)['综合得分指数']
        return Result
    results = topsis(data_2,weight)
    
    results['帮扶单位(0-159)'] = data['帮扶单位(0-159)']
    results['帮扶单位类型(0-5)'] = data['帮扶单位类型(0-5)']
    results.sort_values(by='排序').head(10)
  • 以下回答由chatgpt基于相关博客总结生成:

    我可以提供此问题的具体解决方案。

    1. 实现动态显示当前时间

    使用JavaScript编写时间动态刷新的代码,将其插入到HTML页面的合适位置即可。

    setInterval(function() {
        var now = new Date();
        var date = now.toLocaleDateString();
        var time = now.toLocaleTimeString();
        document.getElementById('current-time').innerHTML = date + ' ' + time;
    }, 1000);
    
    1. 表单中姓名校验框,姓名不能为空

    在表单中添加一个文本框并为其设置"required"属性。

    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>
    
    1. 表单自动生成8位密码并显示

    使用Python中的random模块和字符串函数生成8位随机密码,将其显示在表单的密码框中。

    import random
    import string
    
    password = ''.join(random.choices(string.ascii_letters + string.digits, k=8))
    print(password)
    
    # 在HTML页面中
    <input type="password" id="password" name="password" value="{}">
    
    1. 性别选择项

    使用单选框或下拉菜单将选项以键值对的形式显示,其中默认选项为当前用户的性别。

    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male"{{ 'checked' if gender == 'male' else '' }}>
    <label for="male"></label>
    <input type="radio" id="female" name="gender" value="female"{{ 'checked' if gender == 'female' else '' }}>
    <label for="female"></label>
    
    1. 年龄选择项

    使用数字框并使用"min"和"max"属性限制年龄范围。

    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" min="1" max="120">
    
    1. 所在城市下拉菜单

    使用下拉菜单以选项的形式显示城市列表。

    <label for="city">所在城市:</label>
    <select id="city" name="city">
        {% for city in cities %}
            <option value="{{ city }}"{{ ' selected' if city == user.city else '' }}>{{ city }}</option>
        {% endfor %}
    </select>
    
    1. 爱好选择项

    使用复选框以选项的形式显示爱好列表。

    <label>爱好:</label><br>
    {% for hobby in hobbies %}
        <input type="checkbox" id="{{ hobby }}" name="hobbies[]" value="{{ hobby }}"{{ ' checked' if hobby in user.hobbies else '' }}>
        <label for="{{ hobby }}">{{ hobby }}</label><br>
    {% endfor %}
    
    1. 提交和重置按钮

    使用表单的submit和reset按钮。

    <button type="submit">提交</button>
    <button type="reset">重置</button>
    
    1. 提交表单后,页面需要拼接提示信息

    使用Python编写处理表单提交的代码,将用户信息和提示信息拼接到HTML页面中。

    from flask import Flask, request, render_template
    
    app = Flask(__name__)
    
    @app.route('/submit', methods=['POST'])
    def submit():
        name = request.form['name']
        password = request.form['password']
        gender = request.form['gender']
        age = request.form['age']
        city = request.form['city']
        hobbies = request.form.getlist('hobbies')
        message = '提交成功,您的信息为:姓名:{},密码:{},性别:{},年龄:{},所在城市:{},爱好:{}'.format(
            name, password, gender, age, city, ','.join(hobbies))
        return render_template('submit.html', message=message)
    
    1. 提交两张图片

    使用HTML页面的"enctype"属性和Flask的"request.files"对象实现文件上传。

    <form action="{{ url_for('submit') }}" method="POST" enctype="multipart/form-data">
        <input type="file" name="file1"><br>
        <input type="file" name="file2"><br>
    </form>
    
    @app.route('/submit', methods=['POST'])
    def submit():
        file1 = request.files['file1']
        file2 = request.files['file2']
        # 处理文件上传
        # ...
    

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body>
    <h1 id="clock"></h1>
    <button onclick="startClock()">打开时钟</button>
    <button onclick="stopClock()">关闭时钟</button>
    <script src="clock.js"></script>
</body>
</html>