1. 程式人生 > 其它 >操作元素之改變元素內容

操作元素之改變元素內容

技術標籤:JavaScript-DOMjsjavascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
div,p{ width: 300px; height: 30px; line-height: 30px; color:black; background-color: pink; } </style> </head> <body> <button>顯示當前系統時間</button> <div>某個時間</div> <p>直接顯示時間</
p
>
<script> //1.獲取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); //2. 註冊事件 btn.onclick = function() { div.innerText = getDate(); } function getDate() { var date = new
Date() var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var day = date.getDay(); return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day]; } //直接顯示 var p = document.querySelector('p'); p.innerText = getDate();
</script> </body> </html>