TypechoJoeTheme

代码屋

统计
登录
用户名
密码
/
注册
用户名
邮箱

代码屋

拼一个春夏秋冬|赢一个无悔人生
类目归类
Web

学生登记系统

2020-11-27
/
0 评论
/
175 阅读
/
正在检测是否收录...
11/27

学生登记系统 HTML+CSS+Javascript

效果图

源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学生登记系统</title>
<script type="text/javascript">
    
    function submitStu(){
    
          var student=new Student()
          bh.innerHTML="学生编号:"+student.bih
    
          var student=new Student()
          result.innerHTML="学生姓名:"+student.subject
       
          var student=new Student()
          nl.innerHTML="学生姓名:"+student.nil
       
          var student=new Student()
          dz.innerHTML="学生地址:"+student.address
    }    
    
    
    
    
    
    //创建一个构造函数,建议首字母大写.Student()
    function Student(){
        
        var bih =document.querySelector("#bih").value
        this.bih=bih;
        
        var subject =document.querySelector("#subject").value
        this.subject=subject;
        
        var nil =document.querySelector("#nil").value
        this.nil=nil;
        
        var address =document.querySelector("#address").value
        this.address=address;
        
        
    
    }
</script>


<style type="text/css">
    body{
        background-color: black; /*背景颜色*/
        color: whitesmoke; /*字体颜色*/
    }
    .bt{
    
        text-align: center; /* 文字居中 */
        color: whitesmoke; /*字体颜色*/
        border-radius: 20px; /*圆角边框*/
        padding-left: 20px; /*内边距*/
        /* margin-top: auto; */
        }
    #box{
        height: 400px;/*盒子高度*/
        width: 40%;/*盒子宽度*/
        margin: 0 auto; /*外边距*/
        padding: 0;/*内边距*/
        border-radius: 20px; /*圆角边框*/
        border-style:solid; /*边框*/
        border-width:3px; /*边框宽度*/
        
    }
    li{ 
        list-style: none; /*不显示圆点*/
        margin-top: 20px;
        }
        
        .box1{
        height: 400px;/*盒子高度*/
        width: 40%;/*盒子宽度*/
        margin: 0 auto; /*外边距*/
        margin-top: 20px;
        border-radius: 20px; /*圆角边框*/
        border-style:solid; /*边框*/
        border-width:3px; /*边框宽度*/
        
        }
    .jg{
        padding-left: 35%;/*内边距*/
        padding-top: 10%;/*内边距*/
    }
        .tj{
            padding-top: 10%;/*内边距*/
            padding-left: 35%;/*内边距*/
        }
</style>
    </head>
    <body>
        <div id="box">
            <div class="bt">
        <h3> 学生登记系统</h3>
        </div>
        <hr/>
        <ul>
            <li>学生编号:<input type="text" placeholder="请输入编号" id="bih"/></li>
            <li>学生姓名:<input type="text" placeholder="请输入姓名" id="subject"/></li>
            <li>学生年龄:<input type="text" placeholder="请输入年龄" id="nil"/></li>
            <li>学生地址:<input type="text" placeholder="请输入地址" id="address"/></li>
            <li class="tj"><button onclick="submitStu()" >提交学生信息</button></li>
        </ul>
        </div>
        <div class="box1">
            <div class="bt">
        <h3>提交结果</h3>
        </div>
        <hr/>
        <div class="jg">
        <span id="bh"></span><br />
        <span id="result"></span><br />
        <span id="nl"></span><br />
        <span id="dz"></span>
        </div>
        </div>
        
    </body>
</html>

学生登记系统
朗读
赞 · 1
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

代码屋

本文链接:

https://daimawu.top/Web/11.html(转载时请注明本文出处及文章链接)

评论 (0)