js特效和15个小demo
代码如下：images文件夹未上传
1.图片切换：
<!DOCTYPE html>
<html>
<head>
<title>图片切换</title> </head>
<body>
<img src="data:images/1.jpg" width="400" height="300" id="flower">
<br>
<button id="prev">上一张</button>
<button id="next">下一张</button> <script type="text/javascript">
//获取事件源 需要的标签
var flower = document.getElementById('flower');
var prevBut=document.getElementById('prev');
var nextBut = document.getElementById('next');
var mixIndex = 1,maxIndex = 4;currentIndex = mixIndex; //监听按钮的点击
//下一张
nextBut.onclick = function(){
//到最后一张，当前为第四张，当再次点击事件，当前跳回第一张
if (currentIndex === maxIndex) {
currentIndex = mixIndex;
}else{
currentIndex++;
}
flower.setAttribute('src',`images/${currentIndex}.jpg`)
}
//上一张
prevBut.onclick = function(){
if (currentIndex === mixIndex) {
currentIndex = maxIndex;
}else{
currentIndex--;
}
flower.setAttribute('src',`images/${currentIndex}.jpg`)
} </script>
</body>
</html>
2.图片显示和隐藏
<!DOCTYPE html>
<html>
<head>
<title>图片显示和隐藏</title>
</head>
<body>
<button id="overflow">隐藏</button>
<br>
<img src="data:images/1.jpg" width="300" height="200">
<script type="text/javascript">
var butObj = document.getElementsByTagName('button')[0];
var newImage = document.getElementsByTagName('img')[0]; butObj.onclick = function(){
//判断文本内容来操作开关
if(butObj.innerHTML === '隐藏'){
newImage.style.display = 'none';
butObj.innerHTML = '显示';
}else{
newImage.style.display = 'block';
butObj.innerHTML = '隐藏';
}
} </script> </body>
</html>
3.相册切换效果
<!DOCTYPE html>
<html>
<head>
<title>
相册切换效果
</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul {
list-style: none;
overflow: hidden;
}
li{
float: left;
margin-left: 10px;
margin-top: 20px;
width: 46px;
height: 26px;
border: 2px solid #fff; }
ul li.active{
border-color: red;
}
</style>
</head>
<body>
<img src="data:images/1.jpg" width="300" id="bigImage">
<ul>
<li class="active">
<a href="#">
<img src="data:images/1.jpg" width="46" class="smallImage">
</a>
</li>
<li>
<a href="#">
<img src="data:images/2.jpg" width="46" class="smallImage">
</a>
</li>
<li>
<a href="#">
<img src="data:images/3.jpg" width="46" class="smallImage">
</a>
</li>
<li>
<a href="#">
<img src="data:images/4.jpg" width="46" class="smallImage">
</a>
</li>
</ul> <script type="text/javascript">
//获取事件源
var bigObj = document.getElementById('bigImage');
var smallObj = document.getElementsByClassName('smallImage'); //遍历集合，给每个img标签添加事件
for(var i =0;i<smallObj.length;i++){
smallObj[i].onmouseover = function(){
//在悬浮前清除所有li的class属性
for(var j =0;j<smallObj.length;j++){
smallObj[j].parentNode.parentNode.setAttribute('class','');
}
//当悬浮到这张图片，设置他属性class为active
this.parentNode.parentNode.setAttribute('class','active');
//获取到悬浮图片的src
var smallImageSrc = this.getAttribute('src');
bigObj.setAttribute('src',smallImageSrc);
}
} </script>
</body>
</html>
4.关闭小广告
<!DOCTYPE html>
<html>
<head>
<title>关闭小广告</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#qe_code{
width: 180px;
height: 160px;
position: relative;
}
#qe_code img{
position: absolute;
right: 0;
}
#qe_code span#close{
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="qe_code">
<img src="data:images/1.jpg" id="code" width="168px" height= "160px">
<span id="close">X</span>
<script type="text/javascript">
var qe_codeDiv = document.getElementById('qe_code');
var closeObj = document.getElementById('close');
//隐藏盒子ok~
closeObj.onclick = function(){
qe_codeDiv.style.display = 'none';
} </script> </div> </body>
</html>
5.图片切换完整版 函数封装
<!DOCTYPE html>
<html>
<head>
<title>图片切换</title> <style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
display: inline-block;
margin-right: 20px;
}
#box{
border: 1px solid #ccc;
width: 300px;
height: 70px;
padding-top:450px;
background:url('images/1.jpg') no-repeat
}
</style>
</head>
<body>
<div id="box">
<li class="item">
<img src="data:images/1.jpg" width="46">
</li>
<li class="item">
<img src="data:images/2.jpg" width="46">
</li>
<li class="item">
<img src="data:images/3.jpg" width="46">
</li>
<li class="item">
<img src="data:images/4.jpg" width="46">
</li>
</div>
<script type="text/javascript">
//获取事件源
function $(id){
return typeof id ==='string'? document.getElementById(id):null;
}
var items = document.getElementsByClassName('item');
for(var i = 0;i<items.length;i++){
console.log(i);
var item = items[i]
item.id = i+1; //设置属性
item.onmouseover = function(){
$('box').style.background = `url('images/${this.id}.jpg') no-repeat` //模板字符串``
}
}
</script> </body>
</html>
6.百度换肤
<!DOCTYPE html>
<html>
<head>
<title>百度换肤</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul,li{
list-style: none;
border: 0; }
#bottom1{
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
background-image:url('images/1.jpg');
background-position: center 0;
background-repeat: no-repeat;
}
#top{
width: 100%;
height: 120px;
position: relative;
z-index: 10; }
#top ul{
width: 1200px;
margin:0 auto;
overflow: hidden;
background-color: rgba(255,255,255,.5);
}
#top ul li{
float: left;
}
#top ul li img{
width: 180px;
height: 124px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="bottom1">
</div>
<div id="top">
<ul>
<li class="item">
<img src="data:images/1.jpg">
</li>
<li class="item">
<img src="data:images/2.jpg">
</li>
<li class="item">
<img src="data:images/3.jpg">
</li>
<li class="item">
<img src="data:images/4.jpg">
</li>
</ul> </div>
<script type="text/javascript">
//获取事件源
function $(id){
return typeof id ==='string'? document.getElementById(id):null;
}
var items = document.getElementsByClassName('item');
for(var i = 0;i<items.length;i++){ var item = items[i]
item.id = i+1; //设置属性
item.onmouseover = function(){
$('bottom1').style.backgroundImage = `url('images/${this.id}.jpg')` //模板字符串``
}
}
</script>
</body>
</html>
7.音乐盒实现全选和反选
<!DOCTYPE html>
<html>
<head>
<title>09音乐盒实现全选和反选</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#panel{
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
width: 400px;
margin: 100px auto;
}
.panel-footer{
text-align: center;
}
</style>
</head>
<body>
<div id="panel">
<div class="panel-title">
<h3>千千音乐盒</h3>
<hr>
</div> <div class="panel-content">
<input type="checkbox">漂洋过海来看你<br>
<input type="checkbox">小酒窝<br>
<input type="checkbox">林俊杰<br>
<input type="checkbox">青花瓷<br>
<input type="checkbox">千里之外<br>
<input type="checkbox">我爱你<br>
<input type="checkbox">南山南<br>
<input type="checkbox">可惜不是你<br>
</div>
<div class="panel-footer">
<hr>
<button id="allSelect">全选</button>
<button id="cancelSelect">取消选中</button>
<button id="reverseSelect">反选</button>
</div>
</div> <script type="text/javascript">
function $(id) {
return typeof id ==='string'? document.getElementById(id):null;
}
//获取复选框
var inputs = document.getElementsByTagName('input');
//全选
$('allSelect').onclick = function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked = true;
// inputs[i].setAttribute('checked','checked');
}
}
//取消选中
$('cancelSelect').onclick = function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked = false;
}
}
//反选
$('reverseSelect').onclick = function(){
for(var i=0;i<inputs.length;i++){
//inputs[i].checked = !inputs[i].checked;
if (inputs[i].checked) {
inputs[i].checked = false;
}else{
inputs[i].checked = true;
}
}
}
</script> </body>
</html>
8.表单验证 成绩单前端简单检测合法
<!DOCTYPE html>
<html>
<head>
<title>表单验证</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#prompt{
font-size: 12px;
color: darkgray;
}
#score{
border: 1px solid darkgray;
} /**绿色勾*/
.correct:before {
content: '\2714';
color: #008100;
}
.incorrect:before {
content: '\2716';
color: #b20610;
} </style>
</head>
<body>
<div id="box">
<label for="score">请输入你的成绩:</label>
<input type="text" id="score" placeholder="请输入分数">
<span id="prompt">请输入你的成绩</span>
</div>
<script type="text/javascript">
function $(id){
return typeof id ==='string' ? document.getElementById(id):null;
}
$('score').onblur = function(){
var values = parseFloat(this.value);
if(isNaN(values)){
$('prompt').innerHTML = '输入的成绩不正确';
$('prompt').setAttribute('class','incorrect');
this.style.borderColor = 'red';
}else if(values>0 && values <=100){
$('prompt').innerHTML = '输入的成绩正确';
$('prompt').setAttribute('class','correct');
this.style.borderColor = 'lightgreen';
// $('prompt').className ='correct' 设置属性
}else{
//超出的范围
$('prompt').innerHTML = '输入的成绩超出范围';
$('prompt').setAttribute('class','incorrect');
this.style.borderColor = '#ff7500';
} $('score').onfocus = function(){
$('prompt').innerHTML ='请输入你的成绩';
$('prompt').className='';
$('score').style.borderColor ='darkgray';
$('score').style.outline ='none';
$('score').value = ''; } }
</script>
</body>
</html>
9.上传图片验证
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label for="file">上传图片格式验证:</label>
<input type="file" id="file">
<script type="text/javascript"> //获取事件源
function $(id){
return typeof id ==='string' ? document.getElementById(id): null;
}
//监听图片选择的变化
$('file').onchange=function(){
var path = this.value;
console.log(path);
//获取.后面的格式
var fileIndex = path.lastIndexOf('.');
var file_path = path.substr(fileIndex);
//转为小写
var lower_suffix = file_path.toLowerCase();
console.log(file_path);
//判断
if(lower_suffix==='.jpg' || lower_suffix ==='.gif' ||lower_suffix==='.png' || lower_suffix==='.jpeg'){
alert('上传图片格式正确！');
}else{
alert('上传图片格式不正确！');
}
} </script>
</body>
</html>
10.随机验证码校验
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="code"></div>
<input type="text" name="" id="newCode">
<input type="button" name="" id="validate" value="验证"> <script type="text/javascript">
//全局
var code='';
//获取标签
var codeDiv =document.getElementById('code');
var newCode = document.getElementById('newCode');
var validateBut = document.getElementById('validate'); //文本被添加验证码
createCode(); //给input输入框绑定点击事件
validateBut.onclick = function(){
var newCodeA=newCode.value.toUpperCase();
console.log(newCodeA);
if(codeDiv.innerHTML===newCodeA){
// alert('验证通过！');
window.location.href = 'http://www.baidu.com';
}else{
alert('验证失败！');
newCode.value = ''; } } function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
}
function createCode(){
var codeLength =4;
var randomCode=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
for(var i=0;i<codeLength;i++){
var index = random(0,36);
code+=randomCode[index];
}
codeDiv.innerHTML = code;
} </script> </body>
</html>
11.发表评论
<!DOCTYPE html>
<html>
<head>
<title>发表评论</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul{
list-style: none;
}
#box{
width: 1000px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 20px;
/*background-color: red;*/
}
#comment{
padding: 10px;
width: 80%;
font-size: 20px;
outline: none;
}
.box_top{
margin-bottom: 50px;
}
#comment_content li{
border-bottom: 1px dashed #ccc;
width: 80%;
color: red;
line-height: 45px;
}
#comment_content li a{
float: right;
</style>
</head>
<body>
<div id="box">
<div class="box_top">
<textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论">
</textarea>
<button id="btn">发表</button>
</div>
<ul id="comment_content"> </ul>
</div>
<script type="text/javascript">
window.onload=function(){
//监听按钮的点击
$('btn').onclick =function(){
//1.1 获取用户输入的内容
var content = $('comment').value;
console.log(content);
//1.2判断
if (content.length === 0) {
alert('请输入内容！');
return;
}else{
//1.3 创建li标签
var newLi = document.createElement('li');
newLi.innerHTML = `${content}<a href='javascript:void(0)'>删除</a>`;
//往后面插入
// $('comment_content').appendChild(newLi);
//往前面插入,以ul下儿子辈的第一个为标准
$('comment_content').insertBefore(newLi,$('comment_content').children[0]); //清楚输入框的内容
$('comment').value ='';
};
//删除评论
var delBtn =document.getElementsByTagName('a');
for(var i=0;i<delBtn.length;i++){
//当被点击删除按钮
delBtn[i].onclick = function(){
//this是a，删除li
this.parentNode.remove();
}
} } function $(id){
return typeof id === 'string' ? document.getElementById(id):null;
} } </script>
</body>
</html>
12.九宫格布局浮动实现
<!DOCTYPE html>
<html>
<head>
<title>九宫格布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
overflow: hidden;
}
#wrap .item{
width: 248px;
height: 300px;
font-size: 13px;
}
#wrap .item .title{
width: 248px;
height: 30px;
line-height: 30px;
overflow: hidden;
margin-bottom: 10px;
text-align: center;
}
#wrap .item .price{
color: #ff7500;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.imgContainer{
width: 248px;
display: table-cell;
text-align: center;
}
</style>
</head>
<body>
<div class="cols">
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="wrap">
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服精灵女巫</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div> </div> <script type="text/javascript">
//获取事件源
var buts = document.getElementsByTagName('button');
var items = document.getElementsByClassName('item');
console.log(items);
//监听按钮的点击 buts[0].onclick = function(){
zzy_flex(3); //这里直接调用函数
}
buts[1].onclick = function(){
zzy_flex(4);
}
buts[2].onclick = function(){
zzy_flex(5);
} //封装一个函数
function zzy_flex(colsNum){
for(var i= 0;i<items.length;i++){
items[i].style.float = 'left';
items[i].parentNode.style.width =(colsNum*items[i].offsetWidth)+'px';
}
}
</script>
</body>
</html>
13.九宫格布局定位实现
<!DOCTYPE html>
<html>
<head>
<title>九宫格布局定位实现</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#wrap{
/*overflow: hidden;*/
position: relative;
}
#wrap .item{
width: 248px;
height: 300px;
font-size: 13px;
}
#wrap .item .title{
width: 248px;
height: 30px;
line-height: 30px;
overflow: hidden;
margin-bottom: 10px;
text-align: center;
}
#wrap .item .price{
color: #ff7500;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.imgContainer{
width: 248px;
display: table-cell;
text-align: center;
}
</style>
</head>
<body>
<div class="cols">
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="wrap">
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服精灵女巫</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div>
<div class="item">
<div class="imgContainer">
<img src="data:images/1.jpg" width="200px">
</div>
<p class="title">衣服</p>
<p class="price">￥69</p>
</div> </div> <script type="text/javascript">
//获取事件源
var buts = document.getElementsByTagName('button');
var items = document.getElementsByClassName('item');
console.log(items);
//监听按钮的点击 buts[0].onclick = function(){
zzy_flex(3); //这里直接调用函数
}
buts[1].onclick = function(){
zzy_flex(4);
}
buts[2].onclick = function(){
zzy_flex(5);
} //封装一个函数
function zzy_flex(colsNum){
//第0行第0列 top:0*h left:0*w
//第0行第1列 top:0*h left:1*w
//第0行第2列 top:0*h left:2*w
//第1行第0列 top:1*h left:0*w
//第1行第1列 top:1*h left:1*w
//第1行第2列 top:1*h left:2*w
for(var i=0;i<items.length;i++){
//求每个盒子的行数和列数，比如第10个盒子 10 3行 1列
//11 3 2
var row =parseInt(i/colsNum); //行 从0开始，第一张是 0 0;
var col = parseInt(i%colsNum); //列
//设置盒子定位
items[i].style.position ='absolute';
items[i].style.top = (row*items[i].offsetHeight)+'px';
items[i].style.left = (col*items[i].offsetWidth)+'px';
}
}
</script>
</body>
</html>
14.日期特效
<!DOCTYPE html>
<html>
<head>
<title>日期特效</title>
<style type="text/css"> #nowDate{
position: relative;
width: 300px;
height: 200px;
text-align: center;
background-color: #ff7500;
color: #fff;
font-size: 16px;
border-radius: 5px;
}
#day{
width: 120px;
height: 120px;
background-color: purple;
position: absolute;
top: 20px;
left: 90px;
line-height: 120px;
text-align: center;
vertical-align: middle;
color: #fff;
font-size: 40px;
}
</style>
</head>
<body> <div>
<p id="nowDate"> </p>
<p id="day"> </p>
</div> <script type="text/javascript">
//获取事件源
var nowDate = document.getElementById('nowDate');
var day = document.getElementById('day');
//定时器 更新时间的变化
setInterval(nowNumTime,20); function nowNumTime(){
//创建对象
var now =new Date();
var year = now.getFullYear();
var month =now.getMonth();
var d = now.getDate();
var week = now.getDay();
var hour =now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds(); var weeks =['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
//拼接时间
var temp = ''+(hour>12 ? hour-12:hour);
if(hour ===0){
temp='12';
}
temp = temp+(minute<10 ? ':0' : ':')+minute;
temp = temp+(second<10 ? ':0' : ':')+second;
temp =temp+(hour>=12 ? ' P.M':' A.M');
//拼接年月日 星期
temp =`${year}年${month}月${d}日 ${temp} ${weeks[week]}`; nowDate.innerHTML = temp;
day.innerHTML = d;
} </script>
</body>
</html>
15.长图滚动
<!DOCTYPE html>
<html>
<head>
<title>长图滚动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: #000;
}
#box{
width: 658px;
height: 400px;
border: 1px solid #ff6700;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#box img{
position: absolute;
top: 0;
left: 0;
}
span{
position: absolute;
width: 100%;
height: 50%;
left: 0;
cursor: pointer;
}
#top{
top: 0;
}
#bottom{
bottom:0;
} </style>
</head>
<body> <div id="box">
<img src="data:images/1.jpg">
<span id="top"></span>
<span id="bottom"></span>
</div> <script type="text/javascript">
//获取事件源
var box = document.getElementById('box')
var pic = document.getElementsByTagName('img')[0]
var divTop = document.getElementById('top');
var divBottom = document.getElementById('bottom'); //2添加事件
var num =0,timer =null ;
divTop.onmouseover = function(){
//让图片滚动
clearInterval(timer);
timer = setInterval(function(){
num-=10;
if (num>=-680) {
pic.style.top = num + 'px';
}else{
clearInterval(timer);
} },100);
}
divBottom.onmouseover = function(){
//让图片滚动
clearInterval(timer);
timer = setInterval(function(){
num+=10;
if (num<=0){
pic.style.top = num + 'px';
}else{
clearInterval(timer);
} },100);
}
//失去焦点时候清除定时
box.onmouseout= function(){
clearInterval(timer);
}
</script>
</body>
</html>