From 6a762ea58e4dd5dc600e1f3bb918d0e4def3293a Mon Sep 17 00:00:00 2001
From: xuesinan <1404152492@qq.com>
Date: Fri, 18 Feb 2022 16:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=80=92=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 267 +++++------------------------------------------------
 1 file changed, 24 insertions(+), 243 deletions(-)

diff --git a/index.html b/index.html
index 00421ff..f705ef4 100644
--- a/index.html
+++ b/index.html
@@ -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>