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

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>

推荐阅读更多精彩内容