push all files
This commit is contained in:
32
js/ainmate.js
Normal file
32
js/ainmate.js
Normal file
@@ -0,0 +1,32 @@
|
||||
function animate(obj, target, callback) { // 盒子移动函数
|
||||
clearInterval(obj.timer);
|
||||
obj.timer = setInterval(move, 20);
|
||||
function move() {
|
||||
var step = (target - obj.offsetLeft) / 10;
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step)
|
||||
obj.style.left = obj.offsetLeft + step + 'px';
|
||||
// obj.style.left = target + 'px'; // 闪变
|
||||
if (obj.offsetLeft == target) {
|
||||
clearInterval(obj.timer);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animateY(obj, target, callback) { // 盒子移动函数
|
||||
clearInterval(obj.timer);
|
||||
obj.timer = setInterval(move, 10);
|
||||
function move() {
|
||||
var step = (target - window.pageYOffset) / 10;
|
||||
step = step > 0 ? Math.ceil(step) : Math.floor(step)
|
||||
// obj.style.left = target + 'px'; // 闪变
|
||||
if (window.pageYOffset == target) {
|
||||
clearInterval(obj.timer);
|
||||
callback && callback();
|
||||
}
|
||||
// window.pageYOffset = window.pageYOffset + step + 'px';
|
||||
window.scroll(0, window.pageYOffset + step) // 不加单位
|
||||
}
|
||||
}
|
||||
135
js/index.js
Normal file
135
js/index.js
Normal file
@@ -0,0 +1,135 @@
|
||||
window.addEventListener('load', function () {
|
||||
var arrow_l = this.document.querySelector('.arrow_left');
|
||||
var arrow_r = this.document.querySelector('.arrow_right');
|
||||
var focus = this.document.querySelector('.focus');
|
||||
focus.addEventListener('mouseenter', function () {
|
||||
arrow_l.style.display = 'block';
|
||||
arrow_r.style.display = 'block';
|
||||
clearInterval(timer)
|
||||
timer = null; // 清楚定时器变量
|
||||
})
|
||||
focus.addEventListener('mouseleave', function () {
|
||||
arrow_l.style.display = 'none';
|
||||
arrow_r.style.display = 'none';
|
||||
timer = setInterval(function () {
|
||||
// 手动调用事件
|
||||
arrow_r.click();
|
||||
}, 5000)
|
||||
})
|
||||
var ul = focus.querySelector('ul');
|
||||
var ol = focus.querySelector('.spot'); // 获取 focus 中的 ol
|
||||
// console.log(ul.children.length);
|
||||
|
||||
var num = 0; // 通过箭头控制播放图片的变量
|
||||
var circle = 0; //通过小圆圈的播放图片的变量
|
||||
|
||||
var focusWidth = focus.offsetWidth;
|
||||
for (var i = 0; i < ul.children.length; i++) {
|
||||
// 创建 li
|
||||
var li = this.document.createElement('li');
|
||||
|
||||
li.setAttribute('index', i) // 记录当前 小圆圈的索引号
|
||||
|
||||
// 插入 ul
|
||||
ol.appendChild(li);
|
||||
|
||||
// 创建 li 的同时给 该li 绑定事件，点到此li，此li变色，其他所有li褪色(排他思想)
|
||||
li.addEventListener('click', function () {
|
||||
for (var i = 0; i < ol.children.length; i++) {
|
||||
ol.children[i].className = '';
|
||||
}
|
||||
this.className = 'current'
|
||||
// 点击 小圆圈，移动图片
|
||||
// ul 移动的距离就是小圆圈的索引号 乘以图片的宽度，注意是 负值，往左走
|
||||
var index = this.getAttribute('index') // 获取当前小 li 的索引号
|
||||
|
||||
// 同步思想
|
||||
circle = num = index; // 当点击了某个li，就把小li的索引号给num和circle，这样可以解决不管是通过箭头还是小圆圈播放图片，都不会错序
|
||||
|
||||
animate(ul, -index * focusWidth);
|
||||
|
||||
})
|
||||
}
|
||||
// ol 第一个 li 类名设置为 current
|
||||
ol.children[0].className = 'current';
|
||||
|
||||
// 克隆第一张图片，放在ul的最后面
|
||||
var first = ul.children[0].cloneNode(true) // 深拷贝
|
||||
ul.appendChild(first);
|
||||
|
||||
// 左右侧点击事件
|
||||
var flag = true; // 节流阀
|
||||
arrow_r.addEventListener('click', function () {
|
||||
if (flag) {
|
||||
// flag = false; //停用节流阀功能
|
||||
if (num == ul.children.length - 1) {
|
||||
ul.style.left = 0;
|
||||
num = 0;
|
||||
}
|
||||
num++;
|
||||
animate(ul, -focusWidth * num, function () {
|
||||
flag = true; // 此次移动结束后放开节流阀
|
||||
});
|
||||
|
||||
circle++;
|
||||
// 如果走到最后克隆的图片，则重置 circle的值即可
|
||||
if (circle == ol.children.length) {
|
||||
circle = 0;
|
||||
}
|
||||
circleChange();
|
||||
}
|
||||
})
|
||||
|
||||
arrow_l.addEventListener('click', function () {
|
||||
if (num == 0) {
|
||||
num = ul.children.length - 1;
|
||||
ul.style.left = -num * focusWidth + 'px';
|
||||
}
|
||||
num--;
|
||||
animate(ul, -focusWidth * num);
|
||||
|
||||
circle--;
|
||||
// 当 circle小于0时，讲circle值设置为最后一个
|
||||
if (circle < 0) {
|
||||
circle = ol.children.length - 1;
|
||||
}
|
||||
circleChange();
|
||||
})
|
||||
function circleChange() {
|
||||
// 排他思想,清除所有的ol 下 li的current
|
||||
for (var i = 0; i < ol.children.length; i++) {
|
||||
ol.children[i].className = '';
|
||||
}
|
||||
ol.children[circle].className = 'current'; // 只保留当前的小 li 为current状态
|
||||
}
|
||||
|
||||
var timer = setInterval(function () {
|
||||
// 手动调用事件
|
||||
arrow_r.click();
|
||||
}, 5000)
|
||||
|
||||
|
||||
var rettop = this.document.querySelector('.returntop'); // 侧边栏返回顶部模块
|
||||
var recomment = this.document.querySelector('.recommend') // 推荐模块
|
||||
//页面滚动事件
|
||||
this.document.addEventListener('scroll', function () {
|
||||
// console.log(window.pageYOffset); // 页面被卷曲的头部
|
||||
// console.log(recomment.offsetTop);
|
||||
if (window.pageYOffset >= recomment.offsetTop) {
|
||||
rettop.style.display = 'block';
|
||||
} else {
|
||||
rettop.style.display = 'none';
|
||||
}
|
||||
})
|
||||
|
||||
// 返回顶部事件
|
||||
rettop.addEventListener('click', function () {
|
||||
// window.scroll(0, 0); // 瞬间返回
|
||||
animateY(window, 0)
|
||||
})
|
||||
|
||||
|
||||
// 楼梯跳转
|
||||
var guesslike = this.document.querySelector('.guesslike');
|
||||
console.log(guesslike.offsetTop);
|
||||
})
|
||||
74
js/login1.js
Normal file
74
js/login1.js
Normal file
@@ -0,0 +1,74 @@
|
||||
window.addEventListener("load", function () {
|
||||
// alert('登陆页面可以关闭哦！')
|
||||
var body = document.querySelector("body");
|
||||
var box = document.querySelector(".box");
|
||||
var close = document.querySelector(".close");
|
||||
var closer = document.querySelector(".close").firstElementChild; // close 范围太广，只取其第一个子元素(即装 X 文本的 span元素)
|
||||
var header = document.querySelector(".header");
|
||||
var not = document.querySelector(".not"); // 提示文字最好不要改大盒子里直接修改，而是安排一个小盒子
|
||||
var sub = document.querySelector(".sub");
|
||||
|
||||
var time = 5;
|
||||
|
||||
header.addEventListener("click", function () {
|
||||
body.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
|
||||
box.style.display = "block";
|
||||
|
||||
not.innerHTML = "(拖动顶部可以移动窗口哦 " + time + "! )";
|
||||
time--;
|
||||
|
||||
var time2 = setInterval(notice, 1000);
|
||||
function notice() {
|
||||
not.innerHTML = "(拖动顶部可以移动窗口哦 " + time + "! )";
|
||||
time--;
|
||||
}
|
||||
setTimeout(function () {
|
||||
clearInterval(time2);
|
||||
not.innerHTML = "";
|
||||
time = 5; // 重新赋值，下次再打开时还是从 5 开始计时
|
||||
}, 6000);
|
||||
});
|
||||
|
||||
closer.onclick = function () {
|
||||
box.style.display = "none";
|
||||
body.style.backgroundColor = "#fff";
|
||||
};
|
||||
|
||||
document.addEventListener("selectstart", function (e) {
|
||||
e.preventDefault(); //方法后的两个括号不可以省略
|
||||
// 禁止选中文字，避免给拖动操作带来不好的效果
|
||||
});
|
||||
|
||||
// 开始拖拽
|
||||
// (1) 鼠标按下， 就获取鼠标在盒子内的坐标
|
||||
close.addEventListener("mousedown", function (e) {
|
||||
var x = e.pageX - box.offsetLeft;
|
||||
var y = e.pageY - box.offsetTop; // 记录鼠标在 移动窗口(盒子)内的坐标 x y
|
||||
// console.log(x, y);
|
||||
|
||||
// (2) 当鼠标移动时，设置窗口的 left 和 top 值 ，让其等于鼠标在document的坐标减去在窗口(盒子)内的坐标
|
||||
document.addEventListener("mousemove", move);
|
||||
function move(e) {
|
||||
box.style.left = e.pageX - x + "px";
|
||||
box.style.top = e.pageY - y + "px";
|
||||
}
|
||||
// 鼠标弹起， 就让鼠标移动事件移除
|
||||
document.addEventListener("mouseup", function () {
|
||||
document.removeEventListener("mousemove", move);
|
||||
});
|
||||
});
|
||||
var time3 = 5;
|
||||
sub.addEventListener("click", function () {
|
||||
// alert('haha')
|
||||
sub.value = "您将会在" + time3 + "秒种之后跳转到首页";
|
||||
time3--;
|
||||
setInterval(function () {
|
||||
if (time3 == 0) {
|
||||
alert("登陆成功，点击确定即可进入页面");
|
||||
window.location.href = "https://www.youdu.love/";
|
||||
}
|
||||
sub.value = "您将会在" + time3 + "秒种之后跳转到首页";
|
||||
time3--;
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
84
js/register.js
Normal file
84
js/register.js
Normal file
@@ -0,0 +1,84 @@
|
||||
window.addEventListener('load', function () {
|
||||
var inpPhonNum = document.querySelector('#phonenum'); // 手机号输入框
|
||||
var phoneTips = document.querySelector('.phonetips'); // 手机号输入提示
|
||||
var flag = false; // 验证手机号是否已经正确输入
|
||||
inpPhonNum.addEventListener('focus', function () {
|
||||
if (!flag) {
|
||||
phoneTips.style.color = 'blue';
|
||||
phoneTips.innerHTML = "请输入11位数的手机号"; // 密码输入，获取焦点时提醒
|
||||
}
|
||||
})
|
||||
inpPhonNum.addEventListener('blur', function () {
|
||||
phoneTips.style.color = 'red';
|
||||
if (this.value == '') {
|
||||
phoneTips.innerHTML = '手机号码不能为空';
|
||||
} else if (this.value.length != 11) {
|
||||
phoneTips.innerHTML = '手机号码格式不正确';
|
||||
}
|
||||
else {
|
||||
phoneTips.style.color = 'green';
|
||||
phoneTips.innerHTML = "正确";
|
||||
flag = true
|
||||
btn.disabled = false; // 手机号码正确才给验证码获取按钮激活
|
||||
}
|
||||
})
|
||||
|
||||
var yzm = this.document.querySelector('#yanzhengma');
|
||||
var btn = this.document.querySelector('.btn');
|
||||
btn.disabled = true; // 按钮默认失活
|
||||
var time = 5
|
||||
btn.addEventListener('click', function () {
|
||||
// btn.disabled = true // 这里的 btn 可以用 windows 代替
|
||||
this.disabled = true
|
||||
var timer = setInterval(function () { // 定时器里的 this 指向的是 Windows
|
||||
console.log(this); // 故 事件间隔函数不能随便使用 this
|
||||
if (time < 0) {
|
||||
clearInterval(timer) // 清楚间隔定时器
|
||||
btn.disabled = false
|
||||
time = 5 // 重新开始
|
||||
btn.innerHTML = '发送'
|
||||
} else {
|
||||
btn.innerHTML = time + '秒'
|
||||
time--
|
||||
}
|
||||
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
var pw1 = this.document.querySelector('#pw1');
|
||||
var pw2 = this.document.querySelector('#pw2');
|
||||
var passtips = this.document.querySelector('.passtips');
|
||||
var confirmpasstips = this.document.querySelector('.confirmpasstips');
|
||||
|
||||
pw1.addEventListener('focus', function () {
|
||||
if (this.value == '') {
|
||||
passtips.style.color = 'blue';
|
||||
passtips.innerHTML = '密码长度需要去大于六位'
|
||||
}
|
||||
})
|
||||
pw1.addEventListener('blur', function () {
|
||||
passtips.style.color = 'red';
|
||||
if (flag && yzm.value != '') {
|
||||
if (this.value == '') {
|
||||
passtips.innerHTML = '密码不能为空';
|
||||
} else if (this.value.length < 6) {
|
||||
passtips.innerHTML = '密码未满六位';
|
||||
} else {
|
||||
passtips.style.color = 'green';
|
||||
passtips.innerHTML = '正确';
|
||||
}
|
||||
} else {
|
||||
passtips.innerHTML = '手机号或验证码错误';
|
||||
}
|
||||
})
|
||||
pw2.addEventListener('keyup', function () {
|
||||
if (pw1.value === pw2.value && pw1.value != '') {
|
||||
confirmpasstips.style.color = 'green'
|
||||
confirmpasstips.innerHTML = '正确'
|
||||
} else {
|
||||
confirmpasstips.style.color = 'red'
|
||||
confirmpasstips.innerHTML = '密码上下不一致';
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user