網頁語法求助

網頁語法

1833 2024-03-31 17:02:53 ‧ 1363 瀏覽

分享至

如何將下列語法合併，把時間語法加入漸層文字中，讓時間顯示也有漸層色。
有錯誤也請指正，謝謝。

顯示型式: 港仔嘴 2024-03-31 12:34

============================================
漸層文字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漸層文字</title>
</head>

<style id="INLINE_PEN_STYLESHEET_ID">
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;
    text-align: center;
}
</style>

<body>

<h1>港仔嘴</h1>

</body>
</html>

============================================
CLOCK

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clock</title>
</head>
<style>
body {
  padding: 10px;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
  text-align: right;
  color: white;
  font-family: monospace;
  text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
  font-size: 72px;
  line-height: 1;
}
</style>
<body>
<script>
setInterval(() => {
  document.body.innerText = 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 個回答

iT邦好手 1 級 ‧ 2024-04-01 12:03:19

最佳解答

先看你的程式

漸層文字

h1 {
    background: linear-gradient(to top, #3177fc, #87f6ff, #fcfcfc);
    background-clip: text;
}

這是利用css將h1的文字加上漸層文字

CLOCK

document.body.innerText = ...

這是利用js，在body上插入時間

結論
利用js，將h1的文字上換上時間
利用css，將h1的文字加上漸層文字

document.getElementsByTagName("h1")[0].innerHTML = ...

回應 3
分享
檢舉

1833 iT邦新手 3 級 ‧ 2024-04-01 19:09:22 檢舉

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clock</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;
    text-align: center;
}

body {
  padding: 10px;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
  text-align: right;
  color: transparent;
  font-family: monospace;
  text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
  font-size: 72px;
  line-height: 1;
}
</style>
<body>
<H1>港仔嘴<H1>
<script>
setInterval(() => {
  document.getElementsByTagName("H1")[港仔嘴].innerText = Intl.DateTimeFormat(['sv-SE'], { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }).format(new Date());
}, 100);
</script>
</H1>
</body>
</html>

時間有漸層效果了，但文字沒出現。
請指導

YC iT邦好手 1 級 ‧ 2024-04-01 19:32:12 檢舉

抱歉。你要用innerHTML才行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clock</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;
    text-align: center;
}

body {
  padding: 10px;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
  text-align: right;
  color: transparent;
  font-family: monospace;
  text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
  font-size: 72px;
  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>
</H1>
</body>
</html>