一、js中的元素运动原理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js中的元素运动原理</title>
<style>
div {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid lightpink;
box-shadow: 1px 1px 8px red;
background-color: lawngreen;
margin: 10px;
padding: 10px;
position: absolute;
left: 10px;
top: 50px;
}
</style>
</head>
<body>
<button>点我动起来</button>
<div></div>
<script>
var btn = document.getElementsByTagName('button')[0];
var ball = document.getElementsByTagName('div')[0];
console.log(ball.offsetWidth);
console.log(ball.offsetHeight);
console.log(ball.offsetLeft);
console.log(ball.offsetTop);
console.log(ball.offsetParent);
console.log(ball.offsetParent.offsetWidth);
btn.onclick = function () {
var timer = setInterval(function () {
clearInterval(timer);
if (ball.offsetLeft < 800){
ball.style.left = ball.offsetLeft + 50+ 'px';
}else {
clearInterval(timer);
}
}, 200);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、js中的元素拖拽原理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js中的元素拖拽原理</title>
<style>
#ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
box-shadow: 2px 2px 8px #888;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
<script>
var ball = document.getElementById('ball');
ball.onmousedown = function (event) {
var x = event.clientX - this.offsetLeft;
var y = event.clientY - this.offsetTop;
document.onmousemove = function (event) {
ball.style.left = event.clientX - x + 'px';
ball.style.top = event.clientY - y + 'px';
}
ball.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、get和post请求与传统的表单验证
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>get和post请求与传统的表单验证</title>
<style>
div {
margin-bottom: 8px;
}
input {
width: 180px;
height: 24px;
padding-left: 8px;
}
button {
width: 192px;
height: 30px;
border: 0;
background-color: #ff6500;
color: #fff;
}
</style>
</head>
<body>
<h3>用户登录</h3>
<form action="admin/check.php" method="POST">
<div>
<input type="email" name='email' placeholder="邮箱">
</div>
<div>
<input type="password" name="password" placeholder="密码">
</div>
<div>
<button>登录</button>
</div>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、Ajax原理与应用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax原理与应用</title>
<style>
div {
margin-bottom: 8px;
}
input {
width: 180px;
height: 24px;
padding-left: 8px;
}
button {
width: 102px;
height: 30px;
border: 0;
background-color: #ff6500;
color: #fff;
}
</style>
</head>
<body>
<h3>用户登录</h3>
<form action="admin/check01.php" method="POST">
<div>
<input type="email" name='email' placeholder="邮箱">
</div>
<div>
<input type="password" name="password" placeholder="密码">
</div>
<div>
<button>登录</button>
<span id="tips" style="color:red"></span>
</div>
<script>
var login = document.forms[0];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');
var f = function () {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if(this.status == 200 && this.readyState == 4){
tips.innerHTML = this.responseText;
}
}
request.open('POST', 'admin/check01.php', true);
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
request.send('email=' + email.value + '&password=' + password.value);
}
//验证邮箱
email.onblur = function () {
f();
}
email.oninput = function () {
tips.innerHTML = '';
}
//验证密码
password.onblur = function () {
f();
}
password.oninput = function () {
tips.innerHTML = '';
}
btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登录成功,正在跳转...';
setTimeout(function () {
location.href = 'admin/index.php';
},2000);
} else {
tips.innerHTML = '邮箱和密码不能为空';
}
return false;
}
</script>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例