OBS 显示时间日期 （无需插件）
Cairl
2021年08月16日 20:48

OBS 直播实时画面预览

  • 新建文本文档，将以下代码复制并保存，把“.txt”格式改成“.html”。

代码块
HTML
自动换行
复制代码
<html>
<head>
<style type="text/css">
.time {
    font-family: Impact;
    font-size: 50px;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    line-height:10px;
    text-indent:30px;
    text-shadow:5px 5px 10px #969696;

}
.date {
    font-family: Impact;
    font-size: 30px;
    color: #FFFFFF;
    display: block;
    text-indent:30px;
    text-shadow:5px 5px 10px #969696;
}
</style>
<script>
var monthname = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function padding(topad)
{
    topad = topad.toString();
    if (topad.length == 1)
    {
    topad = '0' + topad;
    };
    return topad;
};
function tempus()
{
    now = new Date();
    document.getElementById("time").innerHTML = padding(now.getHours()) + ':' + padding(now.getMinutes()) + ':' + padding(now.getSeconds());
    document.getElementById("date").innerHTML = now.getDate() + ' ' + monthname[now.getMonth()] + ' ' + now.getFullYear();
    setTimeout("tempus()", 1000);
}
</script>
</head>
<body onload="tempus();">
<br><br><br>
<span id="time" class="time">TIME</span><br>
<span id="date" class="date">DATE</span>
</body>
</html>
复制成功

  • 在 OBS 来源中添加“浏览器”、“新建”，勾选“本地文件”，选择刚刚保存的.html文件。高度和宽度填写自己显示器的分辨率。默认分辨率为：宽度 1920；高度 1080。

  • 点击“确认”后，记得将此源置顶。 （如果有自定义需求请参考下方CSS格式教程，若无需求则教程至此结束。）

请根据需求，修改“.html”文件中的相对属性。（右键以文本文档方式打开即可编辑）

  • 修改文本字体

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

  • 修改文本大小

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

  • 修改文本颜色

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

  • 修改文本属性

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

  • 修改文本行距

代码块
HTML
自动换行
复制代码
    line-height:10px;
复制成功

  • 修改文本缩进

代码块
HTML
自动换行
复制代码
    text-indent:30px;
复制成功

  • 修改文本阴影

代码块
HTML
自动换行
复制代码
    text-shadow:5px 5px 10px #969696;
复制成功

  • 修改顶部间距我是通过添加空白行来实现的，如需修改，请在倒数第4行自行添加或减少<br>，一个<br>代表一行空白行。

注意：

  • 其他未提到的地方，没有CSS基础的人请勿随意修改。

  • 请严格遵守CSS书写格式规范，注意保持缩进以及句尾的分隔号。

  • 转载请注明作者：Cairl

本文为我原创，未经授权禁止转载
cv12700394