timeplayer
Version:
A time player/travel module
112 lines (97 loc) • 6.12 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Timeplayer</title>
<link href="./index.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Timeplayer</h1>
<h2>使用方法</h2>
<div class="content">
<h4>方法一：通过CDN在Head中调用：</h4>
<pre><code class="html"><script src='https://unpkg.com/timeplayer'></script></code></pre>
<h4>方法二：通过NPM使用：</h4>
<h5>安装：</h5>
<pre><code class="bash">npm install timeplayer</code></pre>
<h5>在JS中引入：</h5>
<pre><code class="js">import Timeplayer from 'timeplayer';</code></pre>
</div>
<h2>示例</h2>
<h3>1. 默认</h3>
<p>默认情况下通过
<code class="js">new Timeplayer(dom, {dates})</code> 来实例化控件，其中 dates 为时间字符串组成的数组如:
<code class="json">["2019/10/02","2019/10/03","2019/10/04"]</code>
</p>
<div id="demo1" class="demo"></div>
<h5>通过CodePen调试 ⤵️ </h5>
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="mofei"
data-slug-hash="eYNjwrR"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="Timeplayer basic demo">
<span>See the Pen <a href="https://codepen.io/mofei/pen/eYNjwrR">
Timeplayer basic demo</a> by mofei (<a href="https://codepen.io/mofei">@mofei</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<h3>2. 大量日期</h3>
<p>如果需要显示的时间过多，Timeplayer会自动的将距离过近的时间点进行缩小显示以提高整体可用性，用户可以通过 <code>pointSpace: Number</code> 参数进行修改关键点之间的距离</p>
<div id="demo2" class="demo"></div>
<h5>通过CodePen调试 ⤵️</h5>
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="mofei"
data-slug-hash="wvaxLNK"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="Timeplayer large dates demo">
<span>See the Pen <a href="https://codepen.io/mofei/pen/wvaxLNK">
Timeplayer large dates demo</a> by mofei (<a href="https://codepen.io/mofei">@mofei</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<h3>3. 修改主题</h3>
<p>在深色背景的情况下，可以通过 <code>theme: 'dark'</code> 参数使用黑色主题</p>
<div id="demo3" class="demo" style="background: black;"></div>
<h5>通过CodePen调试 ⤵️</h5>
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="mofei"
data-slug-hash="NWqBZVr"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="Timeplayer dark theme demo">
<span>See the Pen <a href="https://codepen.io/mofei/pen/NWqBZVr">
Timeplayer dark theme demo</a> by mofei (<a href="https://codepen.io/mofei">@mofei</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<h3>4. 修改配色</h3>
<p>如果你对控件的颜色有更高的要求，你可以通过设置 colors 自由的配置每一个元素的颜色，具体可以参考CodePen中的注释</p>
<div id="demo4" class="demo"></div>
<h5>通过CodePen调试 ⤵️</h5>
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="mofei"
data-slug-hash="jOPpjjy"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="Timeplayer dark theme demo">
<span>See the Pen <a href="https://codepen.io/mofei/pen/jOPpjjy">
Timeplayer dark theme demo</a> by mofei (<a href="https://codepen.io/mofei">@mofei</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<h3>5. 监听事件</h3>
<p>实例化控件之后，可以通过 <code>on((index, value)=>{})</code> 和 <code>off()</code> 方法监听控件的时间变化</p>
<div id="demo5" class="demo"></div>
<button id="bindEnv">绑定监听</button>
<button id="removeEnv">移除监听</button>
<div id="tips"></div>
<h5>通过CodePen调试 ⤵️</h5>
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="mofei"
data-slug-hash="PoqBrMw"
style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="Timeplayer events demo">
<span>See the Pen <a href="https://codepen.io/mofei/pen/PoqBrMw">
Timeplayer events demo</a> by mofei (<a href="https://codepen.io/mofei">@mofei</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script type="text/javascript" src="timeplayer.js"></script></body>
<script src="./demo.js" type="text/javascript"></script>
</html>