【发布时间】：2014-05-19 17:05:12
【问题描述】：
我有一个包含 Javascript 的 HTML 页面（见下文）。
在 HTML 页面中有一个调用 Javascript 函数的 HTML 代码行。 这完全可以正常工作，看起来像这样：
<a href="#" id="hour">hour</a>
此代码行从以下 Javascript 的最后部分调用。
我希望用一个按钮替换此代码行。我该怎么做？
谢谢
ps Javascript 是用于 dygraph 的，我没有写。我对Javascript知之甚少。我只是想用一个完成相同工作的按钮替换上面的单行 html，或者通过其他简约的更改生成一个按钮。
$(document).ready(function () {
var r = [ ];
var base_time = Date.parse("2014/03/05");
var num = 24 * 0.25 * 365;
for (var i = 0; i < num; i++) {
r.push([
new Date(base_time + i * 3600 * 1000),
i + 50 * (i % 60), // line
i * (num - i) * 4.0 / num // parabola
]);
}
var orig_range = [
r[0][0].valueOf(),
r[r.length - 1][0].valueOf()
];
// NEW CODE INSERTED - STARTS
var one_month_previous = new Date();
one_month_previous.setMonth(one_month_previous.getMonth() - 1);
var one_week_previous = new Date();
one_week_previous.setDate(one_week_previous.getDate()-7);
var three_days_previous = new Date();
three_days_previous.setDate(three_days_previous.getDate()-3);
var one_days_previous = new Date();
one_days_previous.setDate(one_days_previous.getDate()-1);
var twelve_hours_previous = new Date();
twelve_hours_previous.setHours(twelve_hours_previous.getHours() - 12);
// NEW CODE INSERTED - ENDS
g = new Dygraph(
document.getElementById("graphdiv3"),
"show_csv.php",
{
// NEW CODE INSERTED - STARTS
// dateWindow: [ Date.parse(one_month_previous) ,
// Date.parse(new Date()) ],
dateWindow: [
Date.parse(one_week_previous),
Date.parse(new Date())
],
// dateWindow: [ Date.parse(three_days_previous) ,
// Date.parse(new Date()) ],
// dateWindow: [ Date.parse(one_days_previous) ,
// Date.parse(new Date()) ],
// dateWindow: [ Date.parse(twelve_hours_previous) ,
// Date.parse(new Date()) ],
// dateWindow: [ Date.parse("2014/03/01 12:00:00"),
// Date.parse("2014/03/31 12:00:00") ],
// NEW CODE INSERTED - ENDS
title: 'Temperature(°C) vs Time',
rollPeriod: 1,
showRoller: true,
xlabel: 'Time',
ylabel: 'Temperature (°C)',
legend: 'always',
labelsKMB: 'true',
labelsSeparateLines: 'true',
colors: [
"rgb(51,204,204)",
"#00DD55",
"rgb(255,100,100)",
"rgba(50,50,200,0.4)"
]
}
);
var desired_range = null;
function approach_range() {
if (!desired_range) return;
// go halfway there
var range = g.xAxisRange();
if (Math.abs(desired_range[0] - range[0]) < 60 &&
Math.abs(desired_range[1] - range[1]) < 60) {
g.updateOptions({dateWindow: desired_range});
// (do not set another timeout.)
} else {
var new_range;
new_range = [
0.5 * (desired_range[0] + range[0]),
0.5 * (desired_range[1] + range[1])
];
g.updateOptions({dateWindow: new_range});
animate();
}
}
function animate() {
setTimeout(approach_range, 50);
}
var zoom = function(res) {
var w = g.xAxisRange();
desired_range = [ w[0], w[0] + res * 1000 ];
animate();
}
var reset = function() {
desired_range = orig_range;
animate();
}
var pan = function(dir) {
var w = g.xAxisRange();
var scale = w[1] - w[0];
var amount = scale * 0.25 * dir;
desired_range = [
w[0] + amount,
w[1] + amount
];
animate();
}
document.getElementById('hour').onclick = function() { zoom(3600); };
document.getElementById('day').onclick = function() { zoom(86400); };
document.getElementById('week').onclick = function() { zoom(604800); };
document.getElementById('month').onclick = function() { zoom(30 * 86400); };
document.getElementById('full').onclick = function() { reset(); };
document.getElementById('left').onclick = function() { pan(-1); };
document.getElementById('right').onclick = function() { pan(+1); };
});
【问题讨论】：
-
<button id="hour">hour</button>? -
另外，您的 HTML 锚没有调用您的 javascript。您的 javascript 绑定到 ID 为“小时”的元素的点击事件，这是您的锚点。
-
不要使用 Date 构造函数解析字符串：
var base_time = +(new Date(2014,2,5)); -
@user1062153 描述“不起作用”
-
one_month_previous 的代码将在比上一个天数多的月末失败，例如
31-Jul->31-Jun->01-Jul和31-Mar->31-Feb->03-Mar在非闰年。
标签： javascript html button href