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

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容