如题所示，编写一个或者多个可拖拽的倒计时功能，包括边界判定，目标命中等功能模块……思路还是蛮简单的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net js倒计时</title>
<style>
*{
margin: 0;
padding:0;
}
html, body {
width: 100%;
height: 100%;
}
.wrap {
width: 100%;
height: 100%;
background: yellowgreen;
position: relative;
}
.countdown {
color: #fff;
font-size: 60px;
position:absolute;
}
.target {
padding: 10px;
color: #fff;
background: red;
position: absolute;
bottom: 10%;
left: 50%;
font-size: 50px;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="countdown"></div>
<div class="countdown">testtesttste</div>
</div>
<div class="target" id="target">目标</div>
<script>
// 拖拽
(function(win, doc){
var eventArr = ['touchstart', 'touchmove', 'touchend'];
function Drag(opts) {
this.opts = opts || {};
this.opts.onStart = opts.onStart || function (e) {};
this.opts.onMove = opts.onMove || function (e) {};
this.opts.onInTarget = opts.onInTarget || function (e) {};
this.opts.onEnd = opts.onEnd || function (e) {};
this.init();
}
// 定义选择器
Drag.prototype = {
$: function (e) {
return doc.querySelectorAll(e);
}
}
// 初始化
Drag.prototype.init = function () {
this.dragEle = typeof this.opts.dragEle === 'string' ? this.$(this.opts.dragEle) : this.opts.dragEle;
// 拖拽元素绑定事件
if (this.dragEle.length && this.dragEle.length >= 0) {
for(var i = this.dragEle.length - 1; i >= 0; i--) {
this.addEvent(this.dragEle[i]);
}
} else {
this.addEvent(this.dragEle);
}
// 初始化时获取拖拽元素的受限区域元素的相关取值
if(this.opts.areaEle) {
this.areaEle = typeof this.opts.areaEle === 'string' ? this.$(this.opts.areaEle) : this.opts.areaEle;
this.areaT = this.areaEle.offsetTop;
this.areaL = this.areaEle.offsetLeft;
this.areaW = this.areaEle.offsetWidth || this.areaEle.clientWidth;
this.areaH = this.areaEle.offsetHeight || this.areaEle.clientHeight;
} else {
this.areaT = this.opts.posArr[0];
this.areaL = this.opts.posArr[1];
this.areaW = this.opts.posArr[2];
this.areaH = this.opts.posArr[3];
}
// 初始化获取比对位置目标的相关取值
if(this.opts.tarEle) {
this.tarEle = typeof this.opts.tarEle === 'string' ? this.$(this.opts.tarEle) : this.opts.tarEle;
this.tarT = this.tarEle.offsetTop;
this.tarL = this.tarEle.offsetLeft;
this.tarW = this.tarEle.offsetWidth || this.tarEle.clientWidth;
this.tarH = this.tarEle.offsetHeight || this.tarEle.clientHeight;
}
};
// 元素绑定事件
Drag.prototype.addEvent = function(e) {
for(var i = eventArr.length - 1; i >= 0; i--) {
e.addEventListener(eventArr[i], this[eventArr[i]].bind(this), false);
}
};
// 元素事件处理
Drag.prototype.touchstart = function(e) {
// 阻止默认事件及取消冒泡
e.preventDefault();
e.stopPropagation();
// 初始化
this.dragT = e.target.offsetTop;
this.dragL = e.target.offsetLeft;
this.dragW = e.target.offsetWidth || e.target.clientWidth;
this.dragH = e.target.offsetHeight || e.target.clientHeight;
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
this.moveX = this.moveY = 0;
// 回调
this.opts.onStart(this);
document.addEventListener("touchmove", function(e) {e.preventDefault()}, false);
};
Drag.prototype.touchmove = function(e) {
this.curX = e.changedTouches[0].pageX;
this.curY = e.changedTouches[0].pageY;
this.moveX = this.curX - this.startX;
this.moveY = this.curY - this.startY;
// 检测拖拽元素是否有越界
var topLeft = this.checkOver(this.moveX, this.moveY);
this.setMove(e.target,topLeft.left, topLeft.top);
this.onInTarget(topLeft.left, topLeft.top);
// 回调函数
this.opts.onMove(this);
this.opts.onInTarget(this);
};
Drag.prototype.touchend = function(e) {
this.opts.onEnd(this)
};
// 检测边界并设值
Drag.prototype.checkOver = function(moveX, moveY) {
// 需要移动至的left值跟top值
var x = this.dragL + moveX;
var y = this.dragT + moveY;
if(x < 0) {
x = 0;
} else {
if (x > this.areaW - this.dragW) {
x = this.areaW - this.dragW;
}
}
if (y < 0) {
y = 0
} else {
if (y > this.areaH - this.dragH) {
y = this.areaH - this.dragH
}
}
return {
left: x,
top: y
}
};
// 元素移动
Drag.prototype.setMove = function(ele,x, y) {
ele.style.top = y + 'px';
ele.style.left = x + 'px';
};
// 移动过程中命中目标
Drag.prototype.onInTarget = function(x,y) {
if(x >= this.tarL && x <= (this.tarL + this.tarW) && y >= this.tarT && y <= (this.tarT + this.tarH)) {
this.tarEle.style.transform = 'scale(2)'
} else {
this.tarEle.style.transform = 'scale(1)'
}
};
win.Drag = Drag;
})(window, document)
// 倒计时相关
var countdown = document.getElementsByClassName('countdown')[0];
function getDate(time) {
var curTime = new Date().getTime();
var aheadTime = new Date(time || '2019/11/03 00:00:00').getTime();
var diffTime = aheadTime - curTime;
var d,h,m,s;
if (diffTime >= 0) {
d = formatTime(Math.floor(diffTime/1000/60/60/24));
h = formatTime(Math.floor(diffTime/1000/60/60%24));
m = formatTime(Math.floor(diffTime/1000/60%60));
s = formatTime(Math.floor(diffTime/1000%60));
var str = d + '<span class="time">天</span>'
+ h + '<span class="time">:</span>'
+ m + '<span class="time">:</span>'
+ s;
countdown.innerHTML = str;
} else {
countdown.innerHTML = '0天 00:00:00'
return;
}
setTimeout(getDate,1000);
}
function formatTime(n) {
return n >= 0 && n < 10 ? '0' + n : n;
}
getDate();
// 动态定位
var $wrap = document.getElementById('wrap');
var $childrens = $wrap.children;
for(var i = $childrens.length - 1; i >= 0; i--) {
$childrens[i].style.left = ($wrap.offsetWidth - $childrens[i].offsetWidth) / 2 + 'px';
$childrens[i].style.top = ($wrap.offsetHeight - $childrens[i].offsetHeight) / 2 + 'px';
}
var $target = document.getElementById('target');
// 拖拽
var drag = new Drag({
areaEle: $wrap,
dragEle: $childrens,
tarEle: $target
});
</script>
</body>
</html>
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
