这篇文章主要描述如何实现时间轴功能。
首先是HTML代码：
<body οnlοad="changetime()">
……省略部分代码……
时间轴: <input type="range" name="range" id="range" min="1" max="8" step="1" value="8" οnchange="changetime();"/> <br/>
<center>您选择的是<output name="displayTime" id="displayTime">2015</output>年段</center>
……省略部分代码……
</body>
其中，input是常用的标签，type 设置为 range类型，自HTML5之后才出现该类型。此处设置最小值1，最大值8，step是步长的意思，一步长设置为1，value表示初始值，设置为8。触发函数为changetime();当改变时间轴的值时，触发该函数。
该函数JS代码如下：
/*
* 时间轴模块
*/
function changetime(){
var newtime;
switch($('#range').val()){
case "1": newtime = 1900; break;
case "2": newtime = 1927; break;
case "3": newtime = 1936; break;
case "4": newtime = 1946; break;
case "5": newtime = 1980; break;
case "6": newtime = 2000; break;
case "7": newtime = 2012; break;
case "8": newtime = 2015; break;
}
$('#displayTime').html(newtime).show();
}
很简单的switch语句是吧？$('#range').val();和$('#displayTime').html(newtime).show(); 这两行代码用到了JQuery的知识。相当于：document.getElementById("range").value;和document.getElementById("displayTime").innerHTML = newtime;对于我这个JS，JQ新手，习惯这样混着用。 通过这样简单的js即可显示时间轴的效果。
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
