wally
/
plugin-templete
1
0
Fork 1
Code Issues Releases Wiki Activity
Browse Source

倒计时

test-1
xuesinan 3 years ago
parent
a34beb60df
commit
6a762ea58e
1 changed files with 24 additions and 243 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 267
      index.html

267
index.html
View File

@ -32,150 +32,42 @@
<div class="flex mb-3">
<div class="flex-1" style="width: 100%; height: 50rem;">
<div class="rounded-lg bg-white p-3" style="height: 100%;">
<div data-tname="考勤" data-pid="1472861916249726976" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:300px;width:100%">
<div data-root="p1483375645978533888" style="height: 100%; width: 100%;">
<div id="outer" class="relative overflow-hidden w-full h-full">
<ul id="imgList" class="absolute left-0 list-none">
<li class="float-left bg-red-200">A<img src="img/1.jpg"/></li>
<li class="float-left bg-green-200">B<img src="img/2.jpg"/></li>
<li class="float-left bg-red-500">C<img src="img/3.jpg"/></li>
<li class="float-left bg-green-500">D<img src="img/4.jpg"/></li>
<li class="float-left bg-pink-500">E<img src="img/5.jpg"/></li>
</ul>
<div id="navContainer" class="absolute" style="bottom: 15px; z-index: 5;">
<!-- 我们就是导航点 -->
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
<a class="float-left bg-red-200" style="margin: 0 5px; width: 15px; height: 15px; opacity: 0.5; filter: alpha(opacity=50); border-radius: 100%;" href="javascript:;"></a>
</div>
<!-- 我们是左右切换按钮 -->
<a href="javascript:;" id="picLbtn" class="absolute" style="left: 8px;" onclick="p1483375645978533888.clickPicLbtn()"><img src="img/pic/picLbtn.png"></a>
<a href="javascript:;" id="picRbtn" class="absolute" style="right: 8px;" onclick="p1483375645978533888.clickPicRbtn()"><img src="img/pic/picRbtn.png"></a>
</div>
<div data-tname="倒计时" data-pid="1472861916249726976" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:300px;width:100%">
<div data-root="p1494569464917921792" style="height: 100%; width: 100%;">
倒计时：<div class="test-1-num">60</div>
</div>
</div>
<script>
var p1483375645978533888 = {
var p1494569464917921792_config = {
getToken: 'https://www.tall.wiki/gateway/tall/v1.0/users/userId'
}
</script>
<script>
var p1494569464917921792 = {
token: '',
projectId: '',
roleId: '',
dom: '',
startX: 0, //记录起始 刚刚触摸的点的位置 x的坐标
moveX: 0, //滑动的时候x的位置
distanceX: 0, //滑动的距离
isMove: false, //是否滑动了
index: 0,
width: 0, // 每一屏的宽度
timer: '',
imgList: '', // 轮播div
imgArr: '', // 所有图片
allA: '', // 所有圆点a标签
picLbtn: '', // 左按钮
picRbtn: '', // 右按钮
num: 60,
init() {
this.dom = document.querySelector("div[data-root=p1483375645978533888]");
this.dom = document.querySelector("div[data-root=p1494569464917921792]");
var domBox = this.dom.parentNode;
// var title = this.dom.querySelector('.title');
let that = this;
var outer = that.dom.querySelector('#outer');
var navContainer = that.dom.querySelector('#navContainer');
that.imgList = that.dom.querySelector('#imgList');
that.allA = that.dom.querySelector('#navContainer').getElementsByTagName("a");
that.imgArr = that.dom.querySelectorAll("#imgList>li>img");
that.picLbtn = that.dom.querySelector("#picLbtn");
that.picRbtn = that.dom.querySelector("#picRbtn");
// 设置列表每一项的宽高
var lis = that.dom.querySelector('#imgList').getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = outer.offsetWidth + 'px';
lis[i].style.height = outer.offsetHeight + 'px';
}
/**
* 设置按钮居中
*（大div的宽度 - 导航区域的宽度）/ 2 = 导航区域的左边距
*/
navContainer.style.left = (outer.offsetWidth - navContainer.offsetWidth)/2 + "px";
//（大div的高度 - 按钮区域的高度）/ 2 = 按钮区域的上边距
var tempBtnTop = (outer.offsetHeight - that.picLbtn.offsetHeight)/2 + "px";
that.picLbtn.style.top = tempBtnTop;
that.picRbtn.style.top = tempBtnTop;
// 获取outer的宽
var getOuterWidth = that.getStyle(outer, "width");
// //去掉获取到的宽度值的px，使成为number类型的变量，方便计算
var widthObject = getOuterWidth.match(/\d*/);
that.width = widthObject[0];
// 根据图片的数量设置ul的总宽度
that.imgList.style.width = that.width * that.imgArr.length + "px";
//设置默认选中的效果
that.allA[that.index].style.backgroundColor = "black";
// 正常开启自动切换函数
// that.autoChange();
//--实现点击导航点切换图片
//--调用setA、move、autochange函数
for(var i = 0; i < that.allA.length; i++){
that.allA[i].num = i;
that.allA[i].onclick = function() {
clearInterval(that.timer);
that.index = this.num;
that.setRed();
that.move(that.imgList, "left", -that.width * that.index, 20, function(){
that.autoChange();
});
}
}
outer.addEventListener('touchstart', function(e){
clearInterval(that.timer); //--清除定时器,要记得事件结束之后再打开
that.startX = e.touches[0].clientX; //--触摸点的横坐标
});
// 倒计时
setInterval(() => {
this.num--;
this.dom.querySelector(".test-1-num").innerHTML = this.num;
}, 1000);
outer.addEventListener('touchmove', function(e) {
that.moveX = e.touches[0].clientX; //--获取手指当前接触屏幕位置的横坐标
that.distanceX = that.moveX - that.startX; //--移动的距离=现在-初始
that.isMove = true;
console.log('touchmove', -that.width * that.index + that.distanceX)
that.move(that.imgList, "left", -that.width * that.index + that.distanceX, 20, function(){});
});
outer.addEventListener('touchend', function() {
//--滑动超过 1/3 才可以切换图片，否则即为无效，则吸附回去
//math.abs取绝对值
if (that.isMove && Math.abs(that.distanceX) > that.width/3) {
if (that.distanceX > 0 && that.index != 0) { //上一张
that.index = that.index - 1;
} else if (that.distanceX < 0 && that.index != that.imgArr.length - 2) { //下一张
that.index = that.index + 1;
}
that.move(that.imgList, "left", -that.width * that.index, 20, function(){});
} else if (that.isMove && Math.abs(that.distanceX) < that.width/3) {
that.move(that.imgList, "left", -that.width * that.index, 20, function(){});
}
that.setRed();
// that.autoChange();
});
// 获取父元素携带的参数
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
// this.projectId = domBox.getAttribute("data-pid");
// this.roleId = domBox.getAttribute("data-rid");
this.projectId = domBox.getAttribute("data-pid");
this.roleId = domBox.getAttribute("data-rid");
this.token = domBox.getAttribute("data-token");
// 初始化的时候 获取token
this.getTokenByUserId(userId);
},
@ -183,17 +75,12 @@
// 获取token
getTokenByUserId(userId) {
var that = this
fetch(`https://www.tall.wiki/gateway/tall/v1.0/users/userId?userId=${userId}`)
fetch(`${p1494569464917921792_config.getToken}?userId=${userId}`)
.then(function(response) {
return response.json();
})
.then(function(res) {
const {
success,
code,
data,
msg
} = res;
const { success, code, data, msg } = res;
if (success && code === 200) {
that.token = data.token;
} else {
@ -202,114 +89,8 @@
});
},
// getCompteredStyle方法和current方法作用相同，都是获取dom对象的属性，前者不兼容ie8，后者不兼容firefox，这样写可以解决兼容性的问题。
getStyle(obj, name) {
if(window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
}
},
move(obj, attr, target, speed, callback) {
let that = this;
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(that.getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(that.getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
},
autoChange() {
//--这个定时器可以控制图片停留的时间
//--每隔三秒执行一次，不断的被执行图片就不断切换
let that = this;
that.timer = setInterval(function() {
that.index++;
//--index对长度取余，就可以让index一直在范围内循环
that.index %= that.imgArr.length;
//--这个move实现自动切换的平移效果
that.move(that.imgList, "left", -that.width * that.index, 20, function() {
//--执行move函数时调用set方法，将图片颜色改变，并且首末过渡
that.setA();
that.setRed();
});
},3000);
},
setA(){
if(this.index > this.imgArr.length - 1){
this.index = 0;
this.imgList.style.left = 0;
}
},
setRed(){
for(var i=0 ; i<this.allA.length ; i++){
//--去掉内联样式里的颜色，显示样式表里的红色
//--如果这里不这么写的话，他就会每次遍历到某个图片，就会把他的导航点变成黑色，不会变回来
//--这么写每次调用都会先把大家都变成红色，再把需要的变成黑色
this.allA[i].style.backgroundColor = "";
}
this.allA[this.index].style.backgroundColor = "black";
},
clickPicLbtn() {
let that = this;
clearInterval(that.timer);
if (that.index != 0){
that.index = that.index - 1;
}
that.setRed();
that.move(that.imgList, "left", -that.width * that.index, 20, function(){
that.autoChange();
});
},
clickPicRbtn() {
let that = this;
clearInterval(that.timer);
if (that.index != that.allA.length - 1) {
that.index = that.index + 1;
}
that.setRed();
that.move(that.imgList, "left", -that.width * that.index, 20, function(){
that.autoChange();
});
}
}
p1483375645978533888.init()
p1494569464917921792.init()
</script>
</div>
</div>

Write Preview
Loading…
Cancel
Save