您的位置：首页 > Web前端 > JavaScript

js实现某年某月某天距离现在有多少天,多少分,多少秒,动态显示!

2017-06-05 20:20 267 查看

简单描述一下问题：给定一个年月日时分秒，在网页中动态显示，距离今天已经有多少天，多少小时，多少分钟，多少秒.

1.用到的这些jQuery和jscex文件都可以从网上下载，这里不再赘述
<script src=" jquery-1.11.1.min.js "></script>
<script type="text/javascript" src="jscex.min.js"></script>
<script type="text/javascript" src="jscex-parser.js"></script>
<script type="text/javascript" src="jscex-jit.js"></script>
<script type="text/javascript" src="jscex-builderbase.min.js"></script>
<script type="text/javascript" src="jscex-async.min.js"></script>
<script type="text/javascript" src="jscex-async-powerpack.min.js"></script>
2.这里还要引用一个.js文件，是自己写的，方便操作
<script type="text/javascript" src="functions.js" charset="utf-8"></script>
具体的内容如下：
var $win = $(window);
var clientWidth = $win.width();
var clientHeight = $win.height();

$(window).resize(function() {
var newWidth = $win.width();
var newHeight = $win.height();
if (newWidth != clientWidth && newHeight != clientHeight) {
location.replace(location);
}
});

(function($) {
$.fn.typewriter = function() {
this.each(function() {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function() {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
});
return this;
};
})(jQuery);

function timeElapse(date){
var current = Date();
var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
var days = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds / 3600);
if (hours < 10) {
hours = "0" + hours;
}
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = seconds % 60;
if (seconds < 10) {
seconds = "0" + seconds;
}
var result = "第 <span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 小时 <span class=\"digit\">" + minutes + "</span> 分钟 <span class=\"digit\">" + seconds + "</span> 秒";
$("#clock").html(result);
}


3.不多说了，直接上完整代码，代码上有注释
<body>
<div id="clock-box"> <span></span><font color="#33CC00">我们</font> <span>已经是……</span>
<div id="clock"></div>
</div>
</body>
<script src=" jquery-1.11.1.min.js "></script>
<script type="text/javascript" src="jscex.min.js"></script>
<script type="text/javascript" src="jscex-parser.js"></script>
<script type="text/javascript" src="jscex-jit.js"></script>
<script type="text/javascript" src="jscex-builderbase.min.js"></script>
<script type="text/javascript" src="jscex-async.min.js"></script>
<script type="text/javascript" src="jscex-async-powerpack.min.js"></script>
<script type="text/javascript" src="functions.js" charset="utf-8"></script><script>
var textAnimate = eval(Jscex.compile("async", function ()
{
var together = new Date();
together.setFullYear(2014,10, 15); 			//时间年月日，注意月份是0-11
together.setHours(0);						//小时
together.setMinutes(0);						//分钟
together.setSeconds(0);						//秒前一位
together.setMilliseconds(0);				//秒第二位
$("#clock-box").fadeIn(500);
while (true) {
timeElapse(together);
$await(Jscex.Async.sleep(1000));
}
}));

textAnimate().start();

</script>



4.希望大家有什么不懂得，可以直接查官方文档，穿"一手鞋"。
快乐学习，快乐编程!
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航