js函数——倒计时模块和无缝滚动
倒计时
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时函数</title>
<script>
var timer=(function(){
return function (json){
if(json.currentTime){
var now=new Date();
var year=now.getFullYear();//返回年份（4位数字）
var month=now.getMonth()+1;//返回月份（0-11，所以+1）
var day=now.getDate();//返回某天（1-31）
var h=now.getHours();//返回小时（0-23）
var m=now.getMinutes();//返回分钟（0-59）
var s=now.getSeconds();//返回秒数（0-59）
//补O
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+' '+h+':'+m+':'+s;
setTimeout(function(){timer(json)},1000);
}else{
var endtime=new Date(json.endtime);//结束时间
var nowtime = new Date();//当前时间
var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //计算差的秒数
//一天24小时 一小时60分钟 一分钟60秒
d=parseInt(lefttime/3600/24);
h=parseInt((lefttime/3600)%24);
m=parseInt((lefttime/60)%60);
s=parseInt(lefttime%60);
document.getElementById(json.objId).innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
if(lefttime>0){setTimeout(function(){timer(json)},1000);}
}
}
})() window.onload=function(){
timer({
currentTime:true,
objId:'thisTime'
})
timer({
objId:'countDown',
endtime:"2016/9/1,18:00"
})
}
</script>
</head>
<body>
<b>当前时间:</b> <span id="thisTime"></span><br/><br/>
<b>距离2016/9/1 18:00还有:</b> <span id="countDown"></span>
</body>
</html>
注意点：
1.有两个功能：当前时间和倒计时，带的参数不同
2.主要是利用js返回的数据，要注意月份，某天，小时，分钟，返回的数值区间
3.星期的我这边用数组处理了
4.倒计时主要是计算时间差，结束时间减去当前时间的秒数，在进行数学计算
5.这里用了闭包，防止多个定时器冲突
6.这边的代码比较易懂，牛人可以改造成插件，还望分享分享。嘿嘿
间歇滚动+无缝滚动
效果（用gif录制的效果不是很好，有兴趣的可以down代码）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{margin:0;padding:0;}
.box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;}
.block{position: relative;width: 500px;height: 400px;overflow: hidden;}
.item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;}
.item:nth-child(2n){background: #000}
</style>
<script>
var scrollUp=(function(){
return function(json){
var objScroll = document.getElementById(json.id);
objScroll.scrollTop = 0;
objScroll.innerHTML += objScroll.innerHTML;
if(json.on){
function scrollIng(){
if(objScroll.scrollTop >= objScroll.scrollHeight) {
objScroll.scrollTop = 0;
}else{
objScroll.scrollTop ++;
}
}
var myScroll = setInterval(function(){scrollIng()},30);
objScroll.onmouseover = function(){
clearInterval(myScroll);
}
objScroll.onmouseout = function(){
myScroll = setInterval(function(){scrollIng()},30);
}
}else{
var timer;
function startScroll(){
timer=setInterval(function(){scrollUp()},30);
objScroll.scrollTop++;
}
function scrollUp(){
if(objScroll.scrollTop % json.height==0){
clearInterval(timer);
setTimeout(startScroll,2000);
}else{
objScroll.scrollTop++;
if(objScroll.scrollTop >= objScroll.scrollHeight/2){
objScroll.scrollTop =0;
}
}
}
setTimeout(startScroll,1000);
}
}
})()
window.onload=function(){
//on:间歇滚动/无缝滚动 height:间歇滚动的高度
scrollUp({on:true,id:'block'});
scrollUp({id:'block2',height:120});
} </script>
</head>
<body>
<div class="box">
<div class="block" id="block">
<div class="item">1无缝滚动</div>
<div class="item">2无缝滚动</div>
<div class="item">3无缝滚动</div>
<div class="item">4无缝滚动</div>
<div class="item">5无缝滚动</div>
<div class="item">6无缝滚动</div>
<div class="item">7无缝滚动</div>
<div class="item">8无缝滚动</div>
<div class="item">9无缝滚动</div>
<div class="item">10无缝滚动</div>
<div class="item">11无缝滚动</div>
<div class="item">12无缝滚动</div>
<div class="item">13无缝滚动</div>
<div class="item">14无缝滚动</div>
<div class="item">15无缝滚动</div>
</div>
</div>
<div class="box">
<div class="block" id="block2">
<div class="item">1间歇滚动</div>
<div class="item">2间歇滚动</div>
<div class="item">3间歇滚动</div>
<div class="item">4间歇滚动</div>
<div class="item">5间歇滚动</div>
<div class="item">6间歇滚动</div>
<div class="item">7间歇滚动</div>
<div class="item">8间歇滚动</div>
<div class="item">9间歇滚动</div>
<div class="item">10间歇滚动</div>
<div class="item">11间歇滚动</div>
<div class="item">12间歇滚动</div>
<div class="item">13间歇滚动</div>
<div class="item">14间歇滚动</div>
<div class="item">15间歇滚动</div>
</div>
</div>
</body>
</html>
注意点：
1.盒子块要css 溢出隐藏：overflow:hidden
2.有两个功能：间歇滚动/无缝滚动
3.先复制一块一模一样的代码，无缝滚动：执行定时器一直增加scrollTop值，当scrollTop值大于盒子高度，在设置scrollTop为0，重新来过。间歇滚动在此基础上加了setTimeout，间歇执行，在scrollTop到达指定的height停止
4.疑问：代码中setInterval(function(){scrollIng()},30);这样写才可以执行，setInterval('scrollIng()',30);这样就不行，有没有大神指导下，两者有啥区别？是啥机制？
知识有限，写的东西有不足或者错误信息还望各路大神指点指点，共勉进步。
所谓成功，就是不停地经历失败，并且始终保持热情...
js函数——倒计时模块和无缝滚动的更多相关文章
- js函数——倒计时模块+无缝滚动
倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- js基础教程四之无缝滚动
前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...
- js无缝滚动原理及详解[转自刹那芳华]
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...
- JS 阶段小练习~ 无缝滚动
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- SQL 添加删除列
--添加一列 alter table TableName add columnName columnType --删除表中的一列 alter table TableName drop column c ...
- windows之死活格式化不了D/E/F盘
唉 见教程:Win10系统无法格式化电脑D盘的解决方法
- 【剑指offer】数字在排序数组中出现的次数，C++实现
原创博文,转载请注明出处! # 题目 # 思路 利用二分查找法,查找元素k在排序数组中第一次出现的位置m及最后一次出现的位置n,m-n+1即为元素k再排序数组中出现的次数. 二分查找法在数 ...
- Spring读取配置文件，获取bean的几种方式
BeanFactory有很多实现类,通常使用 org.springframework.beans.factory.xml.XmlBeanFactory类.但对于大部分J2EE应用而言,推荐使 用App ...
- Map集合学习
Java中常用的Map实现类主要有:HashMap.HashTable.TreeMap.LinkedHashMap. 一:HashMap HashMap介绍 HashMap的底层其实是“链表的数组”, ...
- Codeforces 17E Palisection 【Manacher】
Codeforces 17E Palisection E. Palisection In an English class Nick had nothing to do at all, and rem ...
- IIS项目发布完整流程
第一步: 发布项目 使在IIS上发布是防止源码泄露 第二步: 打开IIS(如果没有就自己安装一个)打开IIS步骤 控制面板>系统安全>管理工具>IIS管理器 填写网站的名称和之前发布 ...
- __getitem__ 专用方法
(1) __getitem__ 专用方法很简单.像普通的方法 clear,keys 和 values 一样,它只是重定向到字典,返回字典的值.但是怎么调用它呢?哦,你可以直接调用 __getitem ...
- SQL 中nvarchar和varchar到底能存多少汉字和英文
实践出真知,在SQL中,nvarchar(50)表示汉字和英文都是50,varchar(50)汉字25,英文50
- [转]console.time和console.timeEnd用法
console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间.随着WEB应用越来越重要,JavaScript的执行性能也 ...