目录
如何在OBS直播中添加日期或时间？
Cairl
2022年01月03日 13:00

    我之前有做过相关的技术分享，只不过让这次略有不同的是时间显示样式的不同。

教程：

  1. 新建一个文本文档，将下列代码复制进去;

  2. 保存后将文本文档的后缀 ".txt&#​34; 更改为 ".html&#​34;；

  3. 将该 html 文件视为图层拖入OBS或其他直播软件的画面即可。

代码块
HTML
自动换行
复制代码
<head>

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'>
  
<style>

p {
    margin: 0;
}

#clock {
    color: #FFFFFF;
    font-family: "Share Tech Mono", monospace;
    font-weight: bolder;
    -text-align: center;
    text-shadow: 3px 3px 3px grey;
    position: absolute;
    padding: 1%; 
}

#clock #time {
    font-size: 32px;
}

#clock #date {
    font-size: 24px;
}

</style>

<script>
    if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
    }
    </script>

</head>

<body translate="no" >
  <div id="clock" x-data="app()" x-init="startClock();updateClock();">
    <p id="time" x-text="time">00:00:00</p>
    <p id="date" x-text="date">Loading... </p>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js'></script>
      <script id="rendered-js" >

function app() {
  return {
    time: 0,
    date: 0,
    week: ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAT', 'SATURDAY'],
    startClock() {setInterval(() => {
        this.updateClock();
      }, 1000);},
    updateClock() {
      var newDate = new Date();
      this.time = this.padNum(newDate.getHours(), 2) + ':' + this.padNum(newDate.getMinutes(), 2) + ':' + this.padNum(newDate.getSeconds(), 2);
      this.date = this.padNum(newDate.getFullYear(), 4) + '-' + this.padNum(newDate.getMonth() + 1, 2) + '-' + this.padNum(newDate.getDate(), 2) + ' | ' + this.week[newDate.getDay()];
    },
    padNum: function (num, digit) {
      var zero = '';
      for (var i = 0; i < digit; i++) {
        zero += '0'; 
      }
      return (zero + num).slice (-digit);
    } };

}

    </script>

</body>

</html>
复制成功

自定义样式修改：

如果你没有CSS基础，但想进一步自定义样式，请参考下面参数：

代码块
HTML
自动换行
复制代码
#clock {
***
***
***
}
复制成功

"#​clock" 这个项是整个时钟的主题样式，可以进行修改但不要删除大括号。

代码块
HTML
自动换行
复制代码
color: #FFFFFF;
复制成功

颜色，可以修改为RGB格式，例：

color: rgb(249, 249, 249, 0.75);

括号中前三个数值对应的是颜色不用解释，而末尾 "0.75&#​34; 表示的是不透明度，"1&#​34; 表示完全不透明。

代码块
HTML
自动换行
复制代码
font-family: "Share Tech Mono", monospace;
复制成功

字体，可以修改为本地字体。

（如果需要导入其他未安装字体，可以选择从 Google Font 获取 link 或 import 链接。）

代码块
HTML
自动换行
复制代码
font-weight: bolder;
复制成功

字体属性，常见的参数为："bold&#​34; 加粗；"bolder&#​34; 更粗。

代码块
HTML
自动换行
复制代码
-text-align: center;
复制成功

设置是否让时间行相较于日期行居中。如需要开启，请删除开头横杠 "-&#​34;

（居中）

（不居中）

代码块
HTML
自动换行
复制代码
text-shadow: 3px 3px 3px grey;
复制成功

字体阴影，可以参考颜色参数进行设置。（如不需阴影，可将该行删除。）

代码块
HTML
自动换行
复制代码
position: absolute;
复制成功

定位，目前的参数是绝对位置，不推荐更改。

代码块
HTML
自动换行
复制代码
padding: 1%;
复制成功

边距，如果觉得时钟的位置距离屏幕边框太近，可以适当调高该参数。

也可将 "1%&#​34; 的百分比单位，修改为 "1px&#​34; 像素单位进行微调。

代码块
HTML
自动换行
复制代码
#clock #time {
    font-size: 32px;
}
复制成功

控制时间行字体大小，可自行将数字调高或调小。

代码块
HTML
自动换行
复制代码
#clock #date {
    font-size: 24px;
}
复制成功

控制日期行字体大小，可自行将数字调高或调小。

其他参数如没有CSS基础请勿轻易修改。

如果失效，多半是因为你误删了某行最后的分号 ";&#​34; 导致的，分号决定是否让代码继续运行。

如果想要浏览其他时间样式，请访问我的上一篇教程：OBS 显示时间日期 （无需插件）​

欢迎分享，转载请注明作者。

欢迎一切良性讨论！

时间 直播 网页 插件 自定义 时钟 OBS html css 无需插件
本文为我原创，未经授权禁止转载
cv14682312