js获取时间小案例

原创2019-07-09 15:24:4517
摘要:【1】js改变css样式:document.getElementById().style.属性名="属性值"。【2】改变元素的属性值:        1. document.getElementById("id名").属性名称 ="属性值"。 &nb

【1】js改变css样式:document.getElementById().style.属性名="属性值"。

【2】改变元素的属性值:

        1. document.getElementById("id名").属性名称 ="属性值"。

        2. document.getElementByClassName("class名").属性名称 ="属性值"。

        3. document.getElementByTagName("标签名").属性名称 ="属性值"。

【3】获取日期:

        Date();获取当前时间

        getFullYear();年

        getMonth();月

        getDate();日

        getHours();时

        getMinutes();分

        getSeconds();秒

        getDay();星期


运行案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取时间</title>
<style>
.box{
width:800px;
height:120px;
position: absolute;
top:50%;
left:50%;
margin-top: -60px;
margin-left:-400px;
text-align: center;
}
input{
width: 720px;
height: 50px;
margin-bottom: 10px;
border-radius: 6px;
border:none;
padding:0 10px;
}
.but{
width:740px;
height: 50px;
margin-bottom: 10px;
font-size: 18px;
border-radius: 6px;
border:none;
background-color: #00a5e0;
color: #fff;
}
button:hover{background-color:#fff;color:#00a5e0;}
</style>
<script>
function myclick(){
var myday=new Date()
var month=new Array(12)
    month[0]="1月"
    month[1]="2月"
    month[2]="3月"
    month[3]="4月"
    month[4]="5月"
    month[5]="6月"
    month[6]="7月"
    month[7]="8月"
    month[8]="9月"
    month[9]="10月"
    month[10]="11月"
    month[11]="12月"
var day=new Array(7)
day[0]="日"
day[1]="一"
day[2]="二"
day[3]="三"
day[4]="四"
day[5]="五"
day[6]="六"
var today=myday.getFullYear()+"年"+month[myday.getMonth()]+myday.getDate()+'日'+" "+" "+myday.getHours()+"时"+myday.getMinutes()+"分"+myday.getSeconds()+"秒"+" "+" "+" "+" "+"星期"+day[myday.getDay()]
    document.getElementById("but").value=today;
}
</script>
</head>
<body style="background-color:#282923;">
<div>
<input type="text"  id="but" name="time" placeholder="点击获取当前时间" value="">
<button onclick="myclick()">点击获取当前时间</button>
</div>
</body>
</html>


批改老师:欧阳克批改时间:2019-07-10 13:21:34
老师总结:完成的不错。js的日期时间,多用作选择日期时间。日期时间处理,一般都是php来做。继续加油

发布手记

热门词条

第九期线上培训班