动态日期相关对话框

时间:2014-02-07 16:46:15

标签: html dynamic dialog onclick popup

这是我发给Stack Overflow的第一个问题,所以如果我接近这个错误,请原谅我。

我想要完成的任务:创建一个动态弹出窗口,根据设置的日期范围显示两条消息之一。

此消息的参数示例如下:

  

从奇数年的9月1日到偶数年的4月30日的费用为149美元

     

从偶数年5月1日到奇数年8月31日的费用为249美元

根据这些日期范围,我希望弹出窗口只显示当前费用

目前,我有一个我创建的静态弹出窗口,但我不确定如何将其重新分解为对话框动态显示上述内容。我意识到这是一个非常简单的脚本,目前的状态,但任何帮助将不胜感激。我已经搜索过帮助,但无法在这种特定类型的弹出窗口中找到任何内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script>
function MyFunction()
{
alert("The fee from September 1st of an odd year to April 30th of an even year is $149 \nThe fee from May 1st of an even year to August 31st of an odd year is $249");
}
</script>
</head>

<a id="myLink" title="Click to display fee" href="Service_Pack_93_Planned_VR.pdf" onclick="MyFunction()">Application Form</a>

<body>
</body>
</html>

修改的 在深入研究JavaScript中的条件语句和日期函数之后,我想出了下面的代码。这是在我看到 aholmes 的回复之前(非常有用)。我计划重构我现在拥有的东西,以便我的代码更有效,并适应我从你的回复中学到的东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function myFunction()
{
var x="";
var startDate1=new Date('09/01/2013');
var endDate1=new Date('04/30/2014');
var startDate2=new Date('05/01/2014');
var endDate2=new Date('08/31/2015');

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;

if (startDate1 < today < endDate1)
    {
    x="The fee is $" + "149"
    }
else if (startDate2 < today < endDate2)
    {
    x="The fee is $" + "249"
    }
document.getElementById("test").innerHTML=x;    
}

</script>

</head>
<body>

<button onclick="myFunction()">Try it</button>
<p id="test"></p>

</body>
</html>

修改

我一直试图让我的代码工作,因为使用aholmes提供的信息更新我的变量,但是没有成功。今天我开始工作并修改了一些变量,我相信它正在发挥作用。再次感谢您的帮助。如果您看到任何可以清理或修改的内容,请告诉我

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function myFunction()
{
var x="";

// get the current date
var date = new Date(); // Fri Feb 07 2014 11:34:32 GMT-0800 (PST)

// this will return an integer, counting months starting from 0 (January). Since it is February at the moment, this will return 1.
var month = date.getMonth(); // 1

// this returns the full year as an integer - so 2014.
var year = date.getFullYear(); // 2014

var yearIsOdd = (year % 2 === 1); // false

// remember, months are 0-based, so September (the 9th month) is represented by an 8.
if (month >= 8 && yearIsOdd) {} // false - only month is checked due to short-circuiting.

console.log("month:" + month + " Year:" + year + " Odd?" + yearIsOdd)

// Remember order of operations. Division (and thus, modulo) happens before addition without parentheses!
var nextYearIsEven = !((year + 1) % 2); // false

if ((month >= 8 && yearIsOdd) || (month <= 3 && !yearIsOdd)) 
    {x="The fee is $" + "149"} // false - again, only month is checked
else 
    {x="The fee is $" + "249"}

document.getElementById("test").innerHTML=x;
}

</script>

<body>

<button onclick="myFunction()">Try it</button>
<p id="test"></p>

</body>
</html>

提前谢谢!

2 个答案:

答案 0 :(得分:1)

您可以通过检查当前月份和年份来解决此问题,并使用模运算符确定当前或下一年是偶数还是奇数。

JavaScript有一个名为Date的对象,可以帮助您走上正确的轨道。我们将使用的两个方法是getFullYear()和getMonth()。

以下是您的原始参数。

  

从奇数年的9月1日到偶数年的4月30日的费用为149美元

     

从偶数年5月1日到奇数年8月31日的费用为249美元

因此,我们首先需要检查当前月份是否“大于或等于九月”以及当前年份是否为奇数。

以下是在JavaScript中如何做到这一点。

// get the current date
var date = new Date(); // Fri Feb 07 2014 11:34:32 GMT-0800 (PST)

// this will return an integer, counting months starting from 0 (January). Since it is February at the moment, this will return 1.
var month = date.getMonth(); // 1

// this returns the full year as an integer - so 2014.
var year = date.getFullYear(); // 2014

大!现在我们拥有解决这个问题所需的所有数字。现在我们如何判断你的第一个案例是否属实?

第一部分很简单:

// remember, months are 0-based, so September (the 9th month) is represented by an 8.
if (month >= 8) {} // false

现在我们如何确定当年是偶数还是奇数?我将使用模运算符来查找将年除以2的余数。偶数没有余数,而奇数的余数为1。

接下来,我要把它变成一个布尔。这不一定是必需的,但明确使用bool让我感觉更好。我将结合使用两个“not”运算符:!!

首先将数字(01)转换为布尔值(falsetrue)。第二个!会否定结果,并将false翻转为true,将true翻转为false

让我们看看它的实际效果。

var yearIsOdd = !!(year % 2); // false

if (month >= 8 && yearIsOdd) {} // false - only month is checked due to short-circuiting.

酷!现在我们知道这一年是否是奇数,如果月份是9月还是9月之后。

最后,我们需要确定月份是否在4月份之前,以及年份是否均匀。我正在读你的问题,好像你需要检查一个范围。那么,我对当前日期的解释是“是2014年9月到2015年4月之间的当月?”

我们将完成与设置yearIsOdd完全相同的操作,只需将1添加到当前年份。

另请注意,这次我没有使用两个!非运营商。这是因为我想要0(意思是偶数)将变量设置为true,并使用1(意思不是偶数)将变量设置为false。< / p>

// Remember order of operations. Division (and thus, modulo) happens before addition without parentheses!
var nextYearIsEven = !((year + 1) % 2) // false

if (month >= 8 && yearIsOdd && month <= 3 && nextYearIsEven) {} // false - again, only month is checked
你去吧!我把它作为练习来解决你问题的第二个约束。

关于对话框的内容,请查看此答案:jQuery dialog with dynamic content

答案 1 :(得分:0)

您需要查找的两件事:Javascript中的条件语句和Javascript中的Date对象。

您的弹出功能中需要一个条件语句才能显示一条消息或另一条消息。

if (condition) {
    alert("The fee from September 1 of an odd year to April 30 of an even year is $149.");
} else if (other condition) {
    alert("The fee from May 1 of an even year to August 31 of an odd year is $249.");
}

我不确定你的病情应该是什么,但我想你想把今天的日期与这些范围进行比较。 Javascript有一个Date对象,可用于获取特定日期。

然后您需要做的就是:

var currentDate = new Date(); // today's date
var oddStartDate = new Date(something here); // one date to compare
var oddEndDate = new Date(something here); // other date to compare
if (currentDate > oddDate && currentDate < oddEndDate ) {
    alert("Display one thing");
} else if (other condition) {
    alert("Display other thing");
}

请注意,上述逻辑可能不正确,但它显示了您在Javascript函数中需要执行的操作,以便它能够执行您想要的操作。也可能有更好的方法来做到这一点!