Html 由给定时钟时间触发的简单HMTL5时间进度条？
对于实时天文学视频提要，我需要嵌入一个html5进度条，显示从开始事件时间到结束事件时间范围内的实际时间 比如说水星过境。我想在屏幕底部显示一个进度条，该进度条在2019年11月11日12:35:27 UT开始运输时从左到右开始填充，并在当天18:04:14运输结束时到达右小号。能够在吧台上放置一些时间标记或抽搐应该是个不错的选择 我已经测试了无数hmtl、css和js的组合，但没有成功。这样一个html页面将非常有助于直播持续数分钟到数小时的天文现象，如凌日、掩星和日食 非常感谢你的提示Html 由给定时钟时间触发的简单HMTL5时间进度条？,html,progress-bar,Html,Progress Bar,对于实时天文学视频提要，我需要嵌入一个html5进度条，显示从开始事件时间到结束事件时间范围内的实际时间 比如说水星过境。我想在屏幕底部显示一个进度条，该进度条在2019年11月11日12:35:27 UT开始运输时从左到右开始填充，并在当天18:04:14运输结束时到达右小号。能够在吧台上放置一些时间标记或抽搐应该是个不错的选择 我已经测试了无数hmtl、css和js的组合，但没有成功。这样一个html页面将非常有助于直播持续数分钟到数小时的天文现象，如凌日、掩星和日食 非常感谢你的提示 &l
<!DOCTYPE HTML>
<html lang = "en">
<head>
<!-- basic.html -->
<title>basic.html</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Mercury transit 2019-11-11</h1>
<p>
This bar shows the progress of the event from start at 12:35:27 UT, to finish at 18:04:14 UT.
</p>
<link rel="stylesheet" type="text/css" href="loading-bar.css"/>
<script type="text/javascript" src="loading-bar.js"></script>
<div id="myItem1" data-preset="line" data-duration=30
class="ldBar label-center"></div>
<script>
var bar1 = new ldBar("#myItem1");
var bar2 = document.getElementById('myItem1').ldBar;
bar1.set(100);
</script>
.ldBar{position:relative;}.ldBar.label-center > .ldBar-label{position:absolute;top:100%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:0 0 3px #fff}.ldBar-label:after{content:" s";display:inline}.ldBar.no-percent .ldBar-label:after{content:""}
basic.html
水星过境2019-11-11
此栏显示事件从UT 12:35:27开始到UT 18:04:14结束的进度。
var bar1=新的ldBar（“myItem1”）；
var bar2=document.getElementById（'myItem1'）.ldBar；
bar1.套（100）；
.ldBar{position:relative；}.ldBar.label-center>.ldBar label{position:absolute；top:100%；left:50%；-webkit transform:translate（-50%，-50%）；transform:translate（-50%，-50%）；text shadow:0 0 3px#fff}.ldBar标签：在{content:“s”之后显示：inline}.ldBar.no-percent.ldBar标签：在{content:}之后：
[]