gpt4 book ai didi

javascript - 关于将动态数据输入到 html 页面的表单的建议

转载 作者:行者123 更新时间:2023-11-28 09:14:02 25 4
gpt4 key购买 nike

我有一个项目,我必须在监视器上输出一些安全信息。我让它工作得很好,但其中的日期是动态的,我需要一个表格来方便任何人更改信息。这是其中一个页面的代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Aid Days</title>
<style type="text/css">
/*circle image */
#imgFirstaid { position: absolute; top: 10px; left: 110px; z-index: 0; }

/* large xx of days in the center of the circle */
#strFirstaid{ width: 579px; height: 579px; text-align: center; margin-top: 125px; position: absolute; top: 25px; left: 115px; z-index: 0; font-family: calibri; font-weight: bold; font-size: 250px; color: #403152; }

/* small date at the bottom of the circle */
#txtFirstaid{ width: 579px; height: 579px; text-align: center; margin-top: 365px; position: absolute; top: 25px; left: 115px; z-index: 0; font-family: calibri; font-size: 28px; color: #403152; }
</style>
<script>

function GetFirstaid(){

var then = new Date(2013, 2, 27), // month is zero based, i.e. jan = 0 (yyyy, m, dd)
now = new Date; // no arguments -> current date
// 24 hours, 60 minutes, 60 seconds, 1000 milliseconds
out=Math.abs((now - then) / (1000 * 60 * 60 * 24)); // round the amount of days
rou=Math.round(out)
document.getElementById('strFirstaid').innerHTML=rou;
}
window.onload=function(){GetFirstaid();}//call when everything has loaded

</script>
</head>

<body>
<div id="imgFirstaid"><img src="../images/lg-f.png" /></div>
<div id="strFirstaid"></div>
<div id="txtFirstaid">_____________________ <br />03/27/2013</div> <!-- enter the date as normal -->
</body>
</html>

就像我说的,输出现在效果很好,但我想弄清楚是否可以将表单与此 html 绑定(bind)在一起,还是需要重新开始并使用一些 ASP 或 javascript?

最佳答案

有两种方法可以做到这一点。一个(就像你提到的)是通过表格;另一种是使用“prompt”javascript 方法询问日期。

这是方法一(带有表单)::像这样在 body 标签之前添加表单 -

    <form action="">
Enter date: <input type="text" name="then" value="" />
<input type="submit" value="Submit" />
</form>

如您所见,此表单基本上会调用同一页面本身并附加表单参数。因此,如果您输入日期,例如“4/27/2013”​​,然后按 ENTER 键,您最终会被重定向到同一页面,但这次最终会显示 ?then=4%2F27%2F2013 。

现在,您所需要的就是在 GetFirstaid 方法中解析它。因此,您可以这样做,而不是在“then”变量中使用硬编码日期 -

        var thenStr = window.location.search.substr(6);
var thenDtArr = thenStr.split("%2F");
var then = new Date(thenDtArr[2], thenDtArr[0], thenDtArr[1]);

您应该(显然)执行所有错误处理和数字格式检查;为了使讨论简单,我避免了这种情况。

这是方法二(带提示方法)::在此方法中,您不需要表单。您只需点击该页面,它所做的第一件事就是提示您输入日期。因此,您所需要的就是在 GetFirstaid 方法中(在方法的开头) -

        thenStr = prompt("Please Enter a date:");
var then = null;
if (thenStr != null && thenStr != "") {
var thenDtArr = thenStr.split("/");
then = new Date(thenDtArr[2], thenDtArr[0], thenDtArr[1]);
}

我要做的另一件事是更新“txtFirstaid”字段,以反射(reflect)用户输入的日期。因此,在渲染 strFirstaid 的位置下方,再添加一行来更新 txtFirstaid,如下所示 -

    document.getElementById('strFirstaid').innerHTML=rou;
document.getElementById('txtFirstaid').innerHTML = "_____________________ <br />"+thenDtArr[0]+"/"+thenDtArr[1]+"/"+thenDtArr[2];

希望这有帮助。

关于javascript - 关于将动态数据输入到 html 页面的表单的建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15906450/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com