{"id":6601,"date":"2020-12-15T00:38:14","date_gmt":"2020-12-14T16:38:14","guid":{"rendered":"http:\/\/www.h540305.idv.tw\/?p=6601"},"modified":"2026-03-17T10:03:02","modified_gmt":"2026-03-17T02:03:02","slug":"html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.techx.idv.tw\/index.php\/2020\/12\/15\/html5-css3-javascript\/","title":{"rendered":"\u904b\u7528 HTML5 + CSS3 + JavaScript \u904b\u884c\u7db2\u9801 ( \u6578\u4f4d\u6642\u9418 ) – \u8b93\u7db2\u7ad9\u5206\u79d2\u90fd\u7f8e\u53c3\u8003\u7a0b\u5f0f\u78bc"},"content":{"rendered":"

<!DOCTYPE html>\u00a0 \u00a0 \u00a0 \u00a0<!– This is an HTML5 file –>
<html>\u00a0 \u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <!– The root element –>
<head> <\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <!– Title, scripts & styles go here –>
<title><\/span>\u6578\u4f4d\u6642\u9418<\/title><\/span>
<script>\u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ A script of js code
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Define a function to display the current time
function displayTime() {<\/span>
var elt = document.getElementById(“clock”);\u00a0 \u00a0 \u00a0\/\/ Find element with id=”clock”<\/span><\/span>
var now = new Date();\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ Get current time<\/span><\/span>
elt.innerHTML = now.toLocaleTimeString();\u00a0 \u00a0 \u00a0 \/\/ Make elt display it<\/span><\/span>
setTimeout(displayTime, 1000);\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Run again in 1 second<\/span><\/span>
}<\/span>
window.onload = displayTime;\u00a0 \u00a0 \u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ Start displaying the time when document loads.
<\/script><\/span>
<style>\u00a0<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/* A CSS stylesheet for the clock *\/
#clock {<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*<\/em> Style apply to element with id=”clock” *\/
font: bold 24pt sans;<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/* <\/em>Use a big bold font *\/
background: #ddf;<\/span>\u00a0 \/*<\/em> On a light bluish-gray background *\/
padding: 10px;<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/*<\/em> Surround it with some space *\/
border: solid black 2px;\u00a0<\/span> \u00a0 \/*<\/em> And a solid black border *\/
border-radius: 10px;\u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \/* <\/em>Round the corners (where supported) *\/
}<\/span>
<\/style><\/span>
<\/head><\/span><\/h3>\n

<body><\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <!– The body is the displayed parts of the doc. –>
<h1>{ HTML5 + CSS3 + JavaScript \u6578\u4f4d\u6642\u9418 }<\/h1>\u00a0 \u00a0<!– Display a title –>
<span id=”clock”><\/span>\u00a0 \u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <!– The time gets inserted here –>
<\/body><\/span>
<\/html><\/span><\/h4>\n

<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p>\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

<!DOCTYPE html>\u00a0 \u00a0 \u00a0 \u00a0<!– This is an HTM […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[9],"tags":[94],"class_list":["post-6601","post","type-post","status-publish","format-standard","hentry","category-editors-notes","tag-html5-css3-javascript"],"blocksy_meta":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/posts\/6601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/comments?post=6601"}],"version-history":[{"count":1,"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/posts\/6601\/revisions"}],"predecessor-version":[{"id":20485,"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/posts\/6601\/revisions\/20485"}],"wp:attachment":[{"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techx.idv.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}