css中如何显示时间年月日 星期几 几点几分几秒

html-css010

css中如何显示时间年月日 星期几 几点几分几秒,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta name="keywords" content="js特效" />

<meta name="description" content="js特效网" />

<title>年月日分秒全部显示的时间代码</title>

</head>

<body onload=startclock()>

<form name="clock">

<script language="JavaScript">

var timerID = null

var timerRunning = false

function stopclock (){

if(timerRunning)

clearTimeout(timerID)

timerRunning = false}

function startclock () {

stopclock()

showtime()}

function showtime () {

var now = new Date()

var hours = now.getHours()

var minutes = now.getMinutes()

var seconds = now.getSeconds()

var timeValue = now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日" +((hours >= 12) ? " 下午 " : " 上午 " )

timeValue += ((hours >12) ? hours -12 :hours)

timeValue += ((minutes <10) ? ":0" : ":") + minutes

timeValue += ((seconds <10) ? ":0" : ":") + seconds

document.clock.thetime.value = timeValue

timerID = setTimeout("showtime()",1000)

timerRunning = true}

</script>

<input name="thetime" style="font-size: 9ptcolor:#000000border:1px solid #FFFFFF" size="28"></form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").click(function(){

     var str = "今天是"+(new Date()).toLocaleString()+" 星期" + "日一二三四五六".charAt(new Date().getDay())

     $(".time").html(str)

  })

})

</script>

</head>

<body>

<p>点击我</p>

<div class="time"></div>

</body>

</html>

实现效果这样?:

今天是2018/6/12 下午1:33:05 星期二

<style type="text/css">

.clr:after{clear:bothdisplay:blockoverflow:hiddenheight:0content:"."}

.clr{zoom:1}

.time{background:#d8655bwidth:400pxheight:200pxpadding:40px}

.time div{float:leftwidth:60pxheight:60pxline-height:60pxtext-align:centerbackground:#fde8e6color:#d8655bborder-radius:4pxmargin:5pxfont-size:24px}

</style>

<div class="time clr">

<div id="hour"></div>

<div id="minute"></div>

<div id="second"></div>

</div>

<script type="text/javascript">

setInterval(function (){

var date = new Date()

document.getElementById('hour').innerText = (('0'+ (date.getHours())).slice(-2))

document.getElementById('minute').innerText = (('0'+ (date.getMinutes())).slice(-2))

document.getElementById('second').innerText = (('0'+ (date.getSeconds())).slice(-2))

}, 1000)

</script>