請指導網頁語法

網頁語法

1833 2024-06-25 22:01:31 ‧ 896 瀏覽

分享至

要顯示；
地名
時間

但地名沒出現

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漸層文字 + 時間</title>
</head>
<style>
h1 {
    background: linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background: -webkit-linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.
h1 {
    font-weight: bold;
    font-family: Microsoft JhengHei;
    margin: auto-flow;
    text-align: center;
}
.
body {
  padding: 10px;
  margin: auto-flow;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
}
  color: transparent;
  font-family: Microsoft JhengHei;
  text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
  font-size: 96px;
  line-height: 1;
}
</style>
<body>
<H1><span>港仔嘴</span></H1>
<script>
setInterval(() => {
  document.getElementsByTagName("h1")[0].innerHTML = Intl.DateTimeFormat(['sv-SE'], { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }).format(new Date());
}, 100);
</script>
</body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

haward79

iT邦研究生 1 級 ‧ 2024-06-26 06:18:00

最佳解答

可執行的程式如下
原本程式主要的問題是：用 JS 直接更新 H1 內的時間會導致地點被清除
所以直接幫顯示時間的部份開個新元件 (span) 並設定 ID

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漸層文字 + 時間</title>
</head>
<style>
h1 {
    background: linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background: -webkit-linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

h1 {
    font-weight: bold;
    font-family: Microsoft JhengHei;
    margin: auto-flow;
    text-align: center;
}

body {
  padding: 10px;
  margin: auto-flow;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  color: transparent;
  font-family: Microsoft JhengHei;
  text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
  font-size: 96px;
  line-height: 1;
}
</style>
<body>
<H1><span>港仔嘴</span><br /><span id="current_time"></span></H1>
<script>
setInterval(() => {
  document.getElementById("current_time").innerHTML = Intl.DateTimeFormat(['sv-SE'], { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }).format(new Date());
}, 100);
</script>
</body>
</html>

回應 3
分享
檢舉

1833 iT邦新手 3 級 ‧ 2024-06-26 06:33:30 檢舉

感謝指導

1833 iT邦新手 3 級 ‧ 2024-07-16 21:53:58 檢舉

最後成果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漸層色地名加時間</title>
</head>
<style>
h1 {
    background: linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background: -webkit-linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

h1 {
    font-weight: bold;
    font-family: Microsoft JhengHei;
    margin: auto-flow;
    text-align: center;
}

body {
  padding: 10px;
  margin: auto-flow;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  color: transparent;
  font-family: Microsoft JhengHei;
  text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
  font-size: 24px;
  line-height: 1;
}
</style>
<body>
<H1><span><p align="left">港仔嘴</span><br /><span id="current_time"></span></p></H1>
<script>
setInterval(() => {
  document.getElementById("current_time").innerHTML = Intl.DateTimeFormat(['sv-SE'], { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }).format(new Date());
}, 100);
</script>
</body>
</html>