Magento添加倒计时模块

最新推荐文章于 2021-08-26 11:08:25 发布

陵南仙道

最新推荐文章于 2021-08-26 11:08:25 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： Magento开发 PHP开发总结 magento插件

本文链接：https://blog.youkuaiyun.com/filanphper/article/details/86511197

Magento开发同时被 3 个专栏收录

42 篇文章

订阅专栏

PHP开发总结

38 篇文章

订阅专栏

magento插件

14 篇文章

订阅专栏

本文介绍了如何在Magento中为产品分类列表添加倒计时模块，包括JavaScript、CSS和HTML部分的实现，以及如何进行自我测试以确保功能正常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们以产品分类列表为例
js部分

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="<?php echo $this->getUrl('')?>js/lefttime/leftTime.min.js"></script>

css部分

<style type="text/css">
	table.data-table{width:100%;}
	table.data-table tr:odd{background:#dcebff;}
	table.data-table td{line-height:24px;padding:3px;vertical-align: top;}
	table.data-table th{height:50px;line-height:50px;padding: 3px;font-size:20px;text-align: left;}
	table.data-table .colspan-a{width:35%;}
	table.data-table .colspan-b{width:25%;}
	table.data-table .colspan-c{width:40%;}
	table.data-table td pre{display: block; padding:5px; border: 1px solid #00caff;background: #f8fcff;text-align: left;}
	.testBtn-a{display: inline-block;height:30px;line-height:30px;padding:0 10px; border:0; border-radius:5px;color:#fff;background:rgb(65,133,244);cursor: pointer;}
	.testBtn-a.on{background:#c9c9c9;color:#666;cursor: default;}
	.data-show-box{line-height:30px;}
	.date-tiem-span,.date-s-span{display: inline-block;font-size:18px; width:58px; height:40px;line-height:40px; text-align: center; color:#fff; border-radius:5px;}
	.date-tiem-span{ background:#333;}
	.date-s-span{ background:#f00;}
	.date-select-a{margin-right:5px;}
</style>

html部分

<table cellpadding="0" cellspacing="0" class="data-table">
	    		
				<!--
	    		<tr>
	    			<th colspan="3">2019/01/22 23:45:24</th>
	    		</tr>
				-->
	    		<tr>
	    			<td class="colspan-a">
	    				<div class="data-show-box" id="dateShow1">
	    					<span class="date-tiem-span d">00</span>D
	    					<span class="date-tiem-span h">00</span>H
	    					<span class="date-tiem-span m">00</span>M
	    					<span class="date-s-span s">00</span>S
	    				</div>
	    			</td>
	    			
	    		</tr>
	    		<script type="text/javascript">
	    			$(function(){
	    				//日期倒计时
						$.leftTime("2019/01/16 23:45:24",function(d){
							if(d.status){
								var $dateShow1=$("#dateShow1");
								$dateShow1.find(".d").html(d.d);
								$dateShow1.find(".h").html(d.h);
								$dateShow1.find(".m").html(d.m);
								$dateShow1.find(".s").html(d.s);
							}
						});
	    			});
	    		</script>
	    	</table>
<?php endif; ?>

自行测试。。。