zoukankan      html  css  js  c++  java
  • JS-结合html综合练习js的对象——班级成绩表制作

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title>对象综合练习</title>
    <style type="text/css">
    body {
    font: 14px "微软雅黑";
    }

    span {
    padding: 5px;
    }

    table {
    margin: 0 auto;
    border: 3px solid cornflowerblue;

    }
    tr{
    border: 1px solid #4169E1;
    }
    td#y,#m,#d,#day{
    border:none;
    }
    </style>

    </head>

    <body>
    <table>
    <caption style="background-color:cornflowerblue;padding:5px 0;color: white;">x班期末成绩表</caption>
    <thead>
    <tr>
    <td id="y"></td>
    <td id="m"></td>
    <td id="d"></td>
    <td id="day"></td>
    </tr>
    </thead>
    <tr>
    <td>姓名</td>
    <td>成绩</td>
    <td>备注</td>
    </tr>
    <tr>
    <td>小明</td>
    <td>87</td>
    </tr>
    <tr>
    <td>小花</td>
    <td>81</td>
    </tr>
    <tr>
    <td>小红</td>
    <td>97</td>
    </tr>
    <tr>
    <td>小天</td>
    <td>76</td>
    </tr>
    <tr>
    <td>小张</td>
    <td>54</td>
    <td>不及格</td>
    </tr>
    <tr>
    <td>小小</td>
    <td>94</td>
    </tr>
    <tr>
    <td>小西</td>
    <td>90</td>
    </tr>
    <tr>
    <td>小舞</td>
    <td>66</td>
    </tr>
    <tr>
    <td>小迪</td>
    <td>64</td>
    </tr>
    <tr>
    <td>小曼</td>
    <td>76</td>
    </tr>
    <tr>
    <td>总分</td>
    <td id="sum"></td>
    </tr>
    <tr>
    <td>平均分</td>
    <td id="b"></td>
    </tr>
    </table>
    <script type="text/javascript">
    var mydate = new Date();
    // document.write(mydate);
    document.getElementById('y').innerText = mydate.getFullYear() + '年';
    var monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    document.getElementById('m').innerText = monthArr[mydate.getMonth()] + '月'; //这里注意,直接导出getMonth的值,会比实际月份少1,这是因为,月份是从1-12,而getMonth返回的值则是从0-11,就和星期的返回方法是一样的。所以解决方法也一样,利用返回的值,当做数组的下标调用,对应出正确的月份。用alert(mydate.getMonth())才发现了这个问题,进而解决掉。所以说alert是调试bug的必备良药。
    // alert(mydate.getMonth());
    document.getElementById('d').innerText = mydate.getDate() + '日'; //获得日的方法
    //星期
    var dayArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    document.getElementById('day').innerHTML = dayArr[mydate.getDay()];

    //成绩信息
    var myArr = [['小明', 87],['小花', 81],['小红', 97],['小天', 76],['小张', 54],['小小', 94],['小西', 90],['小舞', 66],['小迪', 64],['小曼', 76]];
    // alert(myArr[0]);
    // alert(myArr[0][1]);
    var sum = 0;
    for(var i=0;i<myArr.length;i++){
    sum += myArr[i][1];
    // alert(myArr[i][1]);
    // document.write(myArr[i][0]+'<br />');
    }
    // document.write(sum);
    document.getElementById('sum').innerText = sum;
    var pjf = sum/myArr.length;
    document.getElementById('b').innerHTML = Math.round(pjf);
    </script>

    </body>

    </html>

  • 相关阅读:
    Bootstrap3系列:按钮式下拉菜单
    Bootstrap3系列:按钮组
    Bootstrap3系列:下拉菜单
    CSS系列:CSS常用样式
    Entity Framework中使用IEnumerable<T>、IQueryable<T>及IList<T>的区别
    ASP.NET中Session的sessionState 4种mode模式
    ASP.NET MVC系列:Area
    Sql Server系列:SQL语句查询数据库中表、视图、存储过程等组成
    ASP.NET MVC系列:Model
    jQuery LigerUI系列:ligerComboBox
  • 原文地址:https://www.cnblogs.com/padding1015/p/5854946.html
Copyright © 2011-2022 走看看