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 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- JS 阶段小练习~ 无缝滚动
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- 【js】横/纵向无缝滚动
1.纵向无缝滚动(类似淘宝) ps:存在一个问题,当鼠标移入时,未关闭定时器 <!DOCTYPE html> <html> <head> <meta char ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- JS定时器的使用--无缝滚动
<title>无标题文档</title> <style> * {margin:0; padding:0;} #div1{width:1172px; height:2 ...
- vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
随机推荐
- cf div2 234 E
E. Inna and Binary Logic time limit per test 3 seconds memory limit per test 256 megabytes input sta ...
- C#画图
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...
- 深入浅出ES6（四）：模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
- 设计模式（Design Patterns——可复用面向对象软件的基础
设 计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代 码可靠性. 毫无疑问 ...
- hdu 4586 Play the Dice
思路:设期望值为s,前m个是再来一次机会,则有 s=(a[1]+s)/n+(a[2]+s)/n+……+(a[m]+s)/n+a[m+1]/n…… 化简:(n-m)s=sum 当sum=0时,为0: 当 ...
- HTML5入门2---js获取HTML元素的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ubuntu 折腾之路
aptitude search :search for the lib...and their realtions. apt-get install :install the app apt-get ...
- 90. Subsets II
题目: Given a collection of integers that might contain duplicates, nums, return all possible subsets. ...
- C++：运算符重载函数之成员运算符重载函数
5.2.3 成员运算符重载函数 在C++中可以把运算符重载函数定义为某个类的成员函数,称之为成员运算符重载函数. 1. 定义成员运算符重载函数的语法形式 (1)在类的内部,定义成员运算符重载函数的格式 ...
- 机器学习 —— 概率图模型（推理：MAP）
MAP 是最大后验概率的缩写.后验概率指的是当有一定观测结果的情况下,对其他随机变量进行推理.假设随机变量的集合为X ,观察到的变量为 e, W = X-e , AP = P(W|e). 后验概率和联 ...