<h3>登陆</h3>
<form>
用户名：<input type="text" id="userName"><br>
密码：<input type="password" id="password"><br>
<input type="button" value="提交" onclick="checkForm()">
</form>
<script>
function checkForm(){
let userName = document.getElementById('userName');
let password = document.getElementById('password');
//用户名非空验证
if(userName.value==''){
alert('用户名不能为空！');
return;
}
//密码非空验证
if(password.value==''){
alert('密码不能为空！');
return;
}
//密码长度必须为六位
if(password.value.length!=6){
alert('密码长度必须为6位！');
return;
}
//密码必须全部为数字
if(isNaN(password.value)){
alert('密码必须全部为数字！');
return;
}
alert('提交');
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>时钟</title>
</head>
<body>
<p id="myclock" style="font-size:24px"></p>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>
<script>
let myclock = document.getElementById("myclock");
let startBtn = document.getElementById("startBtn");
let stopBtn = document.getElementById("stopBtn");
callback();
let mytimer = setInterval(callback, 1000);
function callback() {
var mydate = new Date();
myclock.innerHTML = mydate.getHours() +
":" + mydate.getMinutes() +
":" + mydate.getSeconds();
}
//启动按钮事件
startBtn.onclick = function() {
if (mytimer == null) {
mytimer = setInterval(callback, 1000);
}
};
//停止按钮事件
stopBtn.onclick = function() {
clearInterval(mytimer);
mytimer = null;
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
</head>
<body>
全选<input class="btn" type="checkbox">
<ul>
<li><input type="checkbox">杜比环绕，家庭影院必备，超真实享受</li>
<li><input type="checkbox">NVDIA 99999GT 2G 1024bit极品显卡，不容错过</li>
<li><input type="checkbox">精品热卖，高清晰，45寸LED电视</li>
<li><input type="checkbox">Sony索尼家用最新款笔记本</li>
<li><input type="checkbox">华为，荣耀3C，超低价，性价比奇高</li>
</ul>
<script>
let btn = document.getElementsByClassName('btn')[0];
let inputArr = document.getElementsByTagName('ul')[0].getElementsByTagName('input');
btn.onclick = function() {
let bool = btn.checked;
for (let i = 0; i < inputArr.length; i++) {
inputArr[i].checked = bool;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style>
#lunbo {
width: 1226px;
height: 460px;
position: relative;
margin: 0 auto;
}
#lunbo img {
width: 1226px;
height: 460px;
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
</head>
<body>
<div id="lunbo">
<img src="img/lunbo1.jpg">
<img src="img/lunbo2.jpg">
<img src="img/lunbo3.jpg">
<img src="img/lunbo4.jpg">
<img src="img/lunbo5.jpg">
<img src="img/lunbo6.jpg">
</div>
<script>
let imgArr = document.getElementById('lunbo').getElementsByTagName('img');
//图片数量
let imgNum = imgArr.length
//用此索引来跟踪图片轮播顺序（第一张图片索引即为0）
let index = 0;
//初始化第一张图片
imgArr[0].style.display = 'block';
//每隔3秒轮播一张图片
setInterval(function(){
index++;
//如果轮播到最后一张图片，那么索引就归零
if (index > imgNum - 1) {
index = 0;
}
//先隐藏所有图片
for (let i=0;i<imgNum; i++) {
imgArr[i].style.display = 'none';
}
//再显示当前图片
imgArr[index].style.display = 'block';
}, 3000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播（过度效果）</title>
<style>
#lunbo {
width: 1226px;
height: 460px;
position: relative;
margin: 0 auto;
}
#lunbo img {
width: 1226px;
height: 460px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
/*display: none;*/
}
</style>
</head>
<body>
<div id="lunbo">
<img src="img/lunbo1.jpg">
<img src="img/lunbo2.jpg">
<img src="img/lunbo3.jpg">
<img src="img/lunbo4.jpg">
<img src="img/lunbo5.jpg">
<img src="img/lunbo6.jpg">
</div>
<script>
let imgArr = document.getElementById('lunbo').getElementsByTagName('img');
//图片数量
let imgNum = imgArr.length;
//当前图片索引
let index = 0;
//上一张图片索引
let preIndex = index;
//当前图片初始透明度
let opacityValue = 0;
//上一张图片初始透明度
let preOpacityValue = 1;
//初始化第一张图片
imgArr[index].style.opacity = 1;
setInterval(function() {
//每次切换时，确定当前图片索引与上一张图片索引
preIndex = index;
index++;
//判断是否进行下一轮轮播
if (index > imgNum-1) {
index = 0;
}
//上一张图片隐藏
hideImg();
//当前图片显示
showImg();
}, 3000);
function showImg() {
//设置当前显示图片透明度初始值
opacityValue = 0;
//淡入动画
let time = setInterval(function() {
opacityValue += 0.05;
if (opacityValue >= 1) {
opacityValue = 1;
clearInterval(time);
}
imgArr[index].style.opacity = opacityValue;
}, 40);
}
function hideImg() {
//设置上一张隐藏图片透明度初始值
preOpacityValue = 1;
//淡出动画
let time = setInterval(function() {
preOpacityValue -= 0.05;
if (preOpacityValue <= 0) {
preOpacityValue = 0;
clearInterval(time);
}
imgArr[preIndex].style.opacity = preOpacityValue;
}, 40);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<style>
#fdj {
position: relative;
width: 450px;
height: 450px;
}
#fdj img{
width: 450px;
height: 450px;
}
#fdj .mengban {
position: absolute;
display: none;
width: 225px;
height: 225px;
background-color: yellow;
opacity: 0.4;
cursor: move;
left: 0;
top: 0;
}
#fdj .fdjBox {
position: absolute;
width: 450px;
height: 450px;
top: 0;
left: 460px;
display: none;
}
</style>
</head>
<body>
<!--这里是大图片-->
<div id="fdj">
<img src="img/dazi.jpg">
<div class="mengban"></div>
<div class="fdjBox"></div>
</div>
<script>
<!-- onload能保证图片也加载完毕 -->
window.onload = function() {
let fdj = document.getElementById('fdj');
let mengban = fdj.getElementsByClassName('mengban')[0];
let fdjBox = fdj.getElementsByClassName('fdjBox')[0];
//图片尺寸
let imgWidth = fdj.getElementsByTagName('img')[0].width;
fdj.onmousemove = function(event) {
//这里获取了蒙板的left和top(offsetLeft是fdj距离视口的位置)
let left = event.clientX - this.offsetLeft - imgWidth / 2 / 2;
let top = event.clientY - this.offsetTop - imgWidth / 2 / 2;
//console.log(left + ',' + top);
if (left < 0) {
left = 0;
}
if (left > this.offsetWidth - imgWidth/2) {
left = this.offsetWidth - imgWidth/2;
}
if (top < 0) {
top = 0;
}
if (top > this.offsetHeight - imgWidth/2) {
top = this.offsetHeight - imgWidth/2;
}
mengban.style.left = left + 'px';
mengban.style.top = top + 'px';
mengban.style.display = 'block';
fdjBox.style.backgroundImage = 'url(img/dazi.jpg)';
fdjBox.style.backgroundRepeat = 'no-repeat';
fdjBox.style.backgroundPosition = -left * 2 + 'px' + ' ' + -top * 2 + 'px';
fdjBox.style.display = 'block';
}
fdj.onmouseout = function() {
mengban.style.display = 'none';
fdjBox.style.display = 'none';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>走马灯</title>
<style>
#container {
width: 750px;
height: 198px;
margin: 0 auto;
display: flex;
}
#container > img{
width: 55px;
height: 198px;
}
#container div{
position: relative;
width: 640px;
height: 198px;
overflow: hidden;
display: flex;
}
#container div ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 640px;
height: 198px;
left: 0px;
top: 0px;
display: flex;
}
#container div ul li {
width: 160px;
height: 198px;
}
</style>
</head>
<body>
<!--图片尺寸：160*198-->
<div id="container">
<img src="img/left.jpg">
<div>
<ul>
<li><a href="#"><img src="img/zmd1.jpg"></a></li>
<li><a href="#"><img src="img/zmd2.jpg"></a></li>
<li><a href="#"><img src="img/zmd3.jpg"></a></li>
<li><a href="#"><img src="img/zmd4.jpg"></a></li>
</ul>
</div>
<img src="img/right.jpg">
</div>
<script>
window.onload = function() {
let container = document.getElementById('container');
let scoll = container.getElementsByTagName("ul")[0];
let imgArr = document.querySelectorAll('#container > img');
let btnLeft = imgArr[0];
let btnRight = imgArr[1];
//滚动速度
let speed = 5;
//滚动方向(初始向右)
let fangxiang = 1;
//获取图片数量
let imgNum = scoll.getElementsByTagName("img").length;
//获取图片宽度
let imgWidth = scoll.getElementsByTagName("img")[0].width;
//获取滚动条宽度
let scollWidth = imgNum * imgWidth;
//给滚动条加一倍的内容
scoll.style.width = scollWidth * 2 + "px";
scoll.innerHTML += scoll.innerHTML;
//滚动条初始位置
scoll.style.left = "-" + scollWidth + "px";
let myTimer = setInterval(gundong, 40);
function gundong() {
if (fangxiang == 1) {
if (scoll.offsetLeft >= 0) {
scoll.style.left = "-" + scollWidth + "px";
}
} else {
if (scoll.offsetLeft <= scollWidth * -1) {
scoll.style.left = 0 + "px";
}
}
scoll.style.left = scoll.offsetLeft + (speed * fangxiang) + "px";
}
btnLeft.onmouseover = function() {
fangxiang = -1;
};
btnRight.onmouseover = function() {
fangxiang = 1;
};
scoll.onmouseover = function() {
clearInterval(myTimer);
}
scoll.onmouseout = function() {
myTimer = setInterval(gundong, 40);
}
}
</script>
</body>
</html>
