在我们开始之前,我在这里阅读了很多与该主题相关的其他帖子,例如; 如何使用 javascript 禁用和重新启用按钮? 尽管这些帖子似乎都没有解决我的问题。
我正在使用 html、css 和 javascript 在 Dreamweaver cs6 中创建一个移动应用程序。该应用程序很简单,包括一个控制运行计时器的开始和停止按钮(即使手机关闭,此计时器也会计数,因为它计算存储在数据库中的日期时间值的时间差。)
我想要的是,当计时器正在运行以禁用启动按钮并启用停止按钮时,以及当计时器未运行以使其反转时。我尝试了几种不同程度的方法。
function runningTimer()
{
var timerStarted = localStorage.getItem("timerStarted");
if (timerStarted == "true")
{
document.getElementById("runningTime").style.color="#00CC00";
document.getElementById("stopButton").removeAttribute('disabled');
document.getElementById("startButton").setAttribute("disabled", "disabled");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM temp WHERE tempID=?", [1], function(tx, result) {
for (var i = 0; i < result.rows.length; ++i) {
var row = result.rows.item(i);
var sqlStartTime = row['startTime'];
}
if (!result.rows.length)
{
alert("Error Code 420: Start Time not found.");
}
var currentTime = new Date();
var jsStartTime = convertSQLtoJS(sqlStartTime);
var shiftTimeMS = currentTime - jsStartTime;
var shiftTime = new Date(null, null, null, null, null, null, shiftTimeMS);
var shiftHours = shiftTime.getHours();
if (shiftHours < 10)
{
shiftHours = "0" + shiftHours;
}
var shiftMinutes = shiftTime.getMinutes();
if (shiftMinutes < 10)
{
shiftMinutes = "0" + shiftMinutes;
}
var shiftSeconds = shiftTime.getSeconds();
if (shiftSeconds < 10)
{
shiftSeconds = "0" + shiftSeconds;
}
document.getElementById("runningTime").innerHTML = (shiftHours + ":" + shiftMinutes + ":" + shiftSeconds);
});
});
}
else if (timerStarted == "false")
{
document.getElementById("runningTime").style.color="#FF0000";
document.getElementById("stopButton").setAttribute("disabled", "disabled");
document.getElementById("startButton").removeAttribute('disabled');
}
else
{
document.getElementById("stopButton").setAttribute("disabled", "disabled");
document.getElementById("startButton").removeAttribute('disabled');
}
}
上面的代码在你第一次使用时不起作用。停止或开始按钮在开始时被正确禁用(取决于天气或加载页面/应用程序时计时器是否已经运行。)但是一旦你点击停止或开始它不会重新启用按钮,直到你刷新浏览器中的页面或关闭并重新打开智能手机上的应用程序。所以,我在开始和停止按钮上添加了一个 onClick 页面加载,它在 Google Chrome 中完美运行,但它在智能手机上不起作用。
我也尝试了以下也无法正常工作的方法;
document.getElementById("stopButton").disabled=true;
document.getElementById("startButton").disabled=false;
我有几个朋友帮我查看了代码,每个人似乎都认为它应该可以工作,所以我们都在摸索可能是什么问题,因为一旦你重新加载页面,一旦一切正常。
任何帮助都会很棒,我确信我刚刚做了一些愚蠢的事情,但请告诉我!
亲切的问候,米切尔勒索姆