网站定时提醒功能实现方法
在做网站时，有时需要给用户一个定时提醒的功能，当超过自己设定的时间之后，就会显示提醒内容。这个功能在很多网站开发公司用于网站续费提醒。
下面学做网站论坛就来介绍一下网站定时提醒功能实现方法。
第一步：在需要显示提醒内容的位置，放上以下的DIV；
|
1 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"notice"</span>><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span></div></div> |
第二步：使用JS代码获取当前日期和设定提醒日期。
获取当前日期代码：
|
1 2 3 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #000066; font-weight: bold;">var</span> date <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> seperator1 <span style="color: #339933;">=</span> <span style="color: #3366CC;">"-"</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> year <span style="color: #339933;">=</span> date.<span style="color: #660066;">getFullYear</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> month <span style="color: #339933;">=</span> date.<span style="color: #660066;">getMonth</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> strDate <span style="color: #339933;">=</span> date.<span style="color: #660066;">getDate</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>month <span style="color: #339933;">>=</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">&&</span> month <span style="color: #339933;"><=</span> <span style="color: #CC0000;">9</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> month <span style="color: #339933;">=</span> <span style="color: #3366CC;">"0"</span> <span style="color: #339933;">+</span> month<span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>strDate <span style="color: #339933;">>=</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">&&</span> strDate <span style="color: #339933;"><=</span> <span style="color: #CC0000;">9</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> strDate <span style="color: #339933;">=</span> <span style="color: #3366CC;">"0"</span> <span style="color: #339933;">+</span> strDate<span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #000066; font-weight: bold;">var</span> nowt <span style="color: #339933;">=</span> year <span style="color: #339933;">+</span> seperator1 <span style="color: #339933;">+</span> month <span style="color: #339933;">+</span> seperator1 <span style="color: #339933;">+</span> strDate<span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//当前日期</span></div></div> |
设置提醒日期：
|
1 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #000066; font-weight: bold;">var</span> endt<span style="color: #339933;">=</span><span style="color: #3366CC;">"2030-1-08"</span><span style="color: #006600; font-style: italic;">//提醒日期</span></div></div> |
第三步：将当前日期与提醒日期进行比较，如果当前日期大于设置日期，就显示提醒内容。
|
1 2 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #000066; font-weight: bold;">var</span> nowtime<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span>nowt.<span style="color: #660066;">replace</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"-"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"/"</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> endtimet<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span>endt.<span style="color: #660066;">replace</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"-"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"/"</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>nowtime<span style="color: #339933;">></span>endtimet<span style="color: #009900;">)</span><span style="color: #009900;">{</span><br> document.<span style="color: #660066;">write</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"<p>友情提示：您的网站已到期，请续费！</p>"</span><span style="color: #009900;">)</span><br><span style="color: #009900;">}</span></div></div> |
这样，一个网站定时提醒功能就制作好了，可以根据自己的需要来设置提醒日期和提醒内容。
完整的代码如下：
|
1 2 3 4 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>div id<span style="color: #339933;">=</span><span style="color: #3366CC;">"notice"</span><span style="color: #339933;">></</span>div<span style="color: #339933;">></span><br><br><span style="color: #339933;"><</span>script<span style="color: #339933;">></span><br><span style="color: #000066; font-weight: bold;">var</span> date <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> seperator1 <span style="color: #339933;">=</span> <span style="color: #3366CC;">"-"</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> year <span style="color: #339933;">=</span> date.<span style="color: #660066;">getFullYear</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> month <span style="color: #339933;">=</span> date.<span style="color: #660066;">getMonth</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> strDate <span style="color: #339933;">=</span> date.<span style="color: #660066;">getDate</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>month <span style="color: #339933;">>=</span> <span style="color: #CC0000;">1</span> <span style="color: #339933;">&&</span> month <span style="color: #339933;"><=</span> <span style="color: #CC0000;">9</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> month <span style="color: #339933;">=</span> <span style="color: #3366CC;">"0"</span> <span style="color: #339933;">+</span> month<span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>strDate <span style="color: #339933;">>=</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">&&</span> strDate <span style="color: #339933;"><=</span> <span style="color: #CC0000;">9</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> strDate <span style="color: #339933;">=</span> <span style="color: #3366CC;">"0"</span> <span style="color: #339933;">+</span> strDate<span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #000066; font-weight: bold;">var</span> nowt <span style="color: #339933;">=</span> year <span style="color: #339933;">+</span> seperator1 <span style="color: #339933;">+</span> month <span style="color: #339933;">+</span> seperator1 <span style="color: #339933;">+</span> strDate<span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//当前日期</span><br><span style="color: #000066; font-weight: bold;">var</span> endt<span style="color: #339933;">=</span><span style="color: #3366CC;">"2030-1-08"</span><span style="color: #006600; font-style: italic;">//提醒日期</span><br><span style="color: #000066; font-weight: bold;">var</span> nowtime<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span>nowt.<span style="color: #660066;">replace</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"-"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"/"</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> endtimet<span style="color: #339933;">=</span><span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">(</span>endt.<span style="color: #660066;">replace</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"-"</span><span style="color: #339933;">,</span><span style="color: #3366CC;">"/"</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>nowtime<span style="color: #339933;">></span>endtimet<span style="color: #009900;">)</span><span style="color: #009900;">{</span><br> document.<span style="color: #660066;">write</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"<p>友情提示：您的网站已到期，请续费！</p>"</span><span style="color: #009900;">)</span><br><span style="color: #009900;">}</span><br><span style="color: #339933;"></</span>script<span style="color: #339933;">></span></div></div> |
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 网站定时提醒功能实现方法
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 网站定时提醒功能实现方法
