美文网首页
网页顶部添加一个显示日期的横条

网页顶部添加一个显示日期的横条

作者: Pixcat | 来源:发表于2020-05-26 23:13 被阅读0次

    CSS

    <style type="text/css">

      * {

    margin: 0;

    padding: 0;

    }

    html,body {

    width: 100%;

    height: 100%;

    }

    .top {

    position: fixed;

    width: 100%;

    left: 0;

    top: 0;

    background-color: #293134;

    height: 30px;

    }

    .top h3 {

    top: 2px;

    font: 17px 'Work Sans', sans-serif;

    color: #fff;

    margin-left: 2%;

    margin-top: 6px;

    }

    </style>

    JS

    <SCRIPT language = JavaScript>

    function now() {

    var date = new Date();

    var year = date.getFullYear();

    var mouth = date.getMonth() + 1;

    var day = date.getDate();

    /*

    if(mouth < 10) {

    mouth = "0" + mouth;

    }

    if(day < 10) {

    day = "0" + day;

    }

    */

    var str = '周' + '日一二三四五六'.charAt(new Date().getDay());

    var nowDate = year + "年" + mouth + "月" + day + "日" + " " + str;

    return nowDate;

    }

    var a = now();

    document.getElementById('o').innerHTML = a;

    </SCRIPT>

    HTML

    <div class="top">

    <h3 id="o"></h3>

    </div>

    相关文章

      网友评论

          本文标题:网页顶部添加一个显示日期的横条

          本文链接:https://www.haomeiwen.com/subject/tngbahtx.html