OneNav 主题-分享一段网站时间代码，添加侧边栏

教程分享3年前 (2022)发布战东海

<style type="text/css">

body{background:#00080a}

.clock {width:230px;margin:0 auto; padding:30px; border:0px solid #333; color:#fff; }

#Date { font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size:17.5px; text-align:center; text-shadow:0 0 5px #00c6ff; }

.ys { width:230px; margin:0 auto; padding:0px; list-style:none; text-align:center; }

.ys2 { display:inline; font-size:2.5em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }

#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }

@-webkit-keyframesmymove

{

0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}

50% {opacity:0; text-shadow:none; }

100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }  

}

@-moz-keyframesmymove

{

0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}

50% {opacity:0; text-shadow:none; }

100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }  

}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><!--网站已经调用这段，可以删除-->

<script type="text/javascript">

$(document).ready(function() {

var monthNames = [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ];

var dayNames= ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

var newDate = new Date();

newDate.setDate(newDate.getDate());

$('#Date').html(newDate.getFullYear() + " 年 " + monthNames[newDate.getMonth()] + ' 月 ' + newDate.getDate() + ' 日 ' + dayNames[newDate.getDay()]);

setInterval( function() {

    var seconds = new Date().getSeconds();

    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);

    },1000);

   

setInterval( function() {

    var minutes = new Date().getMinutes();

    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);

    },1000);

   

setInterval( function() {

    var hours = new Date().getHours();

    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);

    }, 1000);

   

});

</script>

</head>

<body>

<div class="clock">

<ul class="ys">

<li id="hours" class="ys2"> </li>

    <li class="ys2" id="point">:</li>

    <li class="ys2" id="min"> </li>

    <li class="ys2" id="point">:</li>

    <li class="ys2" id="sec"> </li>

</ul>

<div id="Date"></div>

</div>