1.transform的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 90px;
height: 90px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<button id="btn">形变</button>
<div id="box"></div>
<script>
window.onload = function () {
var index = 0;
$('btn').onclick = function () {
index ++;
$('box').style.transform = 'translate(' + (index * 100) +'px, '+ (index * 50)+'px) rotate('+ (index * 20) +'deg) scale('+ (index * 1.3)+')';
}
};
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
</body>
</html>
2.表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#prompt{
font-size: 13px;
color: darkgray;
}
#score{
border:1px solid darkgray;
}
.right{
background: url("images/right.png") no-repeat 5px center;
background-size:15px 15px;
padding-left: 20px;
color: lightgreen !important;
}
.error{
background: url("images/error.png") no-repeat 5px center;
background-size:15px 15px;
padding-left: 20px;
color: red !important;
}
</style>
</head>
<body>
<div id="box">
<label>您的成绩:</label>
<input id="score" type="text" placeholder="请输入分数">
<span id="prompt">请输入您的成绩!</span>
</div>
<script>
window.onload = function () {
// 当输入框失去焦点
$('score').onblur = function () {
// 1. 获取输入的内容
var value = parseFloat($("score").value);
// 2.验证
if(isNaN(value)){ // 不是一个数
/* $('prompt').innerText = "输入成绩不正确";
$('prompt').className = 'error';
$('score').style.borderColor = 'red';*/
dealStyle('输入成绩不正确', 'error', 'red');
}else if(value >= 0 && value <= 100){ // 合法的
/*$('prompt').innerText = "输入成绩正确";
$('prompt').className = 'right';
$('score').style.borderColor = 'lightgreen';*/
dealStyle('输入成绩正确', 'right', 'lightgreen');
}else { // 超出
/*$('prompt').innerText = "成绩必须在0-100之间";
$('prompt').className = 'error';
$('score').style.borderColor = 'red';*/
dealStyle('成绩必须在0-100之间', 'error', 'red');
}
};
// 当输入框获得焦点
$('score').onfocus = function () {
/*$('prompt').innerText = "请输入您的成绩!";
$('prompt').className = '';
$('score').style.borderColor = 'darkgray';*/
$('score').style.outline = 'none';
$('score').value = '';
dealStyle("请输入您的成绩!", '', 'darkgray');
};
/**
* 处理公共的样式
* @param {string}msg
* @param {string}className
* @param {string}color
*/
function dealStyle(msg, className, color) {
$('prompt').innerText = msg;
$('prompt').className = className;
$('score').style.borderColor = color;
}
};
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
</body>
</html>
3.上传图片格式验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label>上传图片的格式验证:</label>
<input type="file" id="file">
<script>
/*
jpg png gif
*/
window.onload = function () {
// 1. 获取标签
var file = document.getElementById('file');
// 2. 监听作用域的变化
file.onchange = function () {
// 2.1 获取上传图片的路径
var path = this.value;
// console.log(path);
// 2.2 截取
var suffix = path.substr(path.lastIndexOf('.'));
// console.log(suffix);
// 2.3 统一转成小写
var lower_suffix = suffix.toLowerCase();
// console.log(lower_suffix);
// 2.4 判断
if(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg' || lower_suffix === '.gif'){
alert('上传图片正确');
}else {
alert('上传图片不正确');
}
}
}
</script>
</body>
</html>
4.发表评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 800px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 20px;
}
#my_textarea{
width: 80%;
height: 120px;
}
.box-top{
margin-bottom: 20px;
}
#ul{
margin: 0 80px;
}
#ul li{
border-bottom: 1px dashed #ccc;
color: red;
line-height: 44px;
}
#ul li a{
float: right;
}
</style>
</head>
<body>
<div id="box">
<div class="box-top">
<label>发表评论：</label>
<textarea id="my_textarea" cols="60" rows="10"></textarea>
<button id="btn">发表</button>
</div>
<ul id="ul">
</ul>
</div>
<script>
window.onload = function () {
// 1. 监听按钮的点击
$('btn').onclick = function () {
// 1.1 获取用户输入的内容
var content = $('my_textarea').value;
// console.log(content);
// 1.2 判断
if(content.length === 0){
alert("请输入评论的内容~");
return;
}
// 1.3 创建li标签放入ul
var li = document.createElement('li');
li.innerHTML = content + '<a href="javascript:;">删除</a>';
// $('ul').appendChild(li);
$('ul').insertBefore(li, $('ul').children[0]);
// 1.4 清除输入框中的内容
$('my_textarea').value = '';
// 1.5 删除评论
var as = $('ul').getElementsByTagName('a');
for(var i =0; i<as.length; i++){
var a = as[i];
a.onclick = function () {
// alert(9);
// 1.6 获取父标签,删除
this.parentNode.remove();
}
}
}
};
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
</script>
</body>
</html>
5.九宫格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#top{
padding: 20px;
}
#bottom{
position: relative;
}
.box{
width: 220px;
height: 360px;
margin: 0 15px 15px 0;
background-color: #e8e8e8;
}
.box p:last-child{
font-size: 13px;
color: orangered;
}
</style>
</head>
<body>
<div id="top">
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="bottom">
<div class="box">
<img src="image/1.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/2.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/3.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/4.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/5.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/6.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/7.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/8.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/9.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/10.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/11.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/12.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/13.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/14.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/15.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var btns = document.getElementById("top").children;
var bottom = document.getElementById("bottom");
// 2.监听按钮的点击
btns[0].onclick = function () {
j_flex(3, bottom);
};
btns[1].onclick = function () {
j_flex(4, bottom);
};
btns[2].onclick = function () {
j_flex(5, bottom);
};
function j_flex(allCols, parentNode) {
// 2.1 定义变量
var boxW = 220, boxH = 360, marginXY = 15;
// 2.2 遍历
for(var i=0; i<parentNode.children.length; i++){
// 2.2.1 求出当前盒子所在的行和列
var row = parseInt(i / allCols);
var col = parseInt(i % allCols);
// console.log("当前盒子在第" + row + " ,第" + col);
// 2.2.2 盒子的定位
var currentBox = parentNode.children[i];
currentBox.style.position = 'absolute';
currentBox.style.left = col * (boxW + marginXY) + 'px';
currentBox.style.top = row * (boxH + marginXY) + 'px';
}
}
}
</script>
</body>
</html>
