jQuery怎么实现发布时间自动计算出距离当前时间多少多久
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery怎么实现发布时间自动计算出距离当前时间多少多久相关的知识，希望对你有一定的参考价值。
参考技术A亲，这个我以前也做过的，虽然写的比较生涩，但是可以看看是不是你要的效果
1、倒计时24小时（只计算24小时，比如12点发，当前11点，就会差1个小时，若当前13点，就会差23小时）
http://www.jingjingke.com/c/22109.html
2、倒计时带上天数，这个需要对接114time上面的一个时间，整理的代码如下：
http://www.jingjingke.com/c/1183.html
JS 实现九宫格算法
九宫格算法核心：
- 利用控件索引index计算出控件所在的行数和列数；
- 利用控件计算出left距离；
- 利用控件计算出top距离；
- 写特效时需要用到定位
公式：
- 行 row=parseInt(i/cols);
- 列 col=parseInt(i%cols);
i是当前的盒子，cols是总列数，
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
<style>
*{
padding: 0;
margin: 0;
}
#top{
margin-top:30px;
margin-bottom: 20px;
margin-left:20px;
}
#bottom{
position: relative;
}
#bottom .content{
width: 220px;
height: 360px;
background-color: skyblue;
margin: 0 0 15px 15px;
padding: 5px;
}
.content img{
width: 220px;
height: 308px;
}
#bottom .content p:last-child{
font-size: 15px;
color: red;
}
</style>
</head>
<body>
<div id="top">
<button>排成三列</button>
<button>排成四列</button>
<button>排成五列</button>
</div>
<div id="bottom">
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
</div>
<script>
window.onload=function(){
var top=document.getElementById("top");
var btns=top.getElementsByTagName("button");
var content=document.getElementById("bottom");
// console.log(content.children);
//console.log(btns);
//定义变量标识盒子的宽度和高度
var cssW=220;
var cssH=360;
var marginXY=15;
//监听按钮点击事件
btns[0].onclick=function(){
getContent(3);
}
btns[1].onclick=function(){
getContent(4)
}
btns[2].onclick=function(){
getContent(5);
}
function getContent(cols){
var cols;
//遍历
for(var i=0;i<content.children.length;i++){
var currentCont=content.children[i];
//console.log(currentCont);
//盒子所在的行
var row=parseInt(i/cols);
//盒子所在的列
var col=parseInt(i%cols);
//console.log("盒子在第" +row+ "行,""在第" +col+ "列");
currentCont.style.position="absolute";
currentCont.style.left=col*(cssW+marginXY)+"px";
currentCont.style.top=row*(cssH+marginXY)+"px";
}
}
}
</script>
</body>
</html>
以上是关于jQuery怎么实现发布时间自动计算出距离当前时间多少多久的主要内容，如果未能解决你的问题，请参考以下文章