python 学习_第五模块 JS特效
1 图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>01 图片切换</title> </head> <body> <img src="images/image01.jpg" id="flower" width="200" height="200"> <br> <button id="prev">上一张</button> <button id="next">下一张</button> <!-- 1. 获取事件源 需要的标签 --> <script type="text/javascript"> var flower = document.getElementById('flower'); var nextBth = document.getElementById('next'); var prevBth = document.getElementById('prev'); var minIndex=1;maxIndex=4;currentIndex=minIndex; // 2 监听按钮的点击 nextBth.onclick = function(){ if (currentIndex===maxIndex){ // 最后一张 currentIndex=minIndex; }else { currentIndex++; } flower.setAttribute('src',`images/image0${currentIndex}.jpg`); } prevBth.onclick = function(){ if (currentIndex===minIndex){ // 最后一张 currentIndex=maxIndex; }else { currentIndex--; } flower.setAttribute('src',`images/image0${currentIndex}.jpg`); } </script> </body> </html>
2 显示和隐藏图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示和隐藏图片</title> </head> <body> <button id='btn'>隐藏</button> <br> <img src="images/img01.jpg" id="new"> <script type="text/javascript"> // 1 获取事件源 var obtn = document.getElementById("btn"); var newImg = document.getElementsByTagName("img")[0]; obtn.onclick = function(){ if(obtn.innerHTML === '隐藏'){ newImg.style.display = 'none'; obtn.innerHTML = '显示'; }else{ newImg.style.display = 'block'; obtn.innerHTML = '隐藏'; } } </script> </body> </html>
3 衣服相册
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>03 衣服相册</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; overflow: hidden; } ul li { float: left; width: 50px; height: 50px; margin-left:10px; margin-top: 10px; border: 2px solid #fff; } ul li.active{ border-color: red; } </style> </head> <body> <img src="images/1.jpg" id="bigImg"> <ul> <li class="active"> <a href=""> <img src="images/1.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/2.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/3.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/4.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/5.jpg" width="46" class="smallImg"> </a> </li> </ul> <script type="text/javascript"> // 1 获取事件源 var bigImg = document.getElementById('bigImg'); var smallImgs = document.getElementsByClassName('smallImg'); for (var i=0;i<smallImgs.length;i++){ smallImgs[i].onmouseover = function(){ // 3.事件处理程序 // 3.1 在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值 for(var j = 0; j < smallImgs.length; j++){ smallImgs[j].parentNode.parentNode.setAttribute('class', ''); } // 3.2修改大图的src属性值 var smallImgSrc = this.getAttribute('src'); bigImg.setAttribute('src',smallImgSrc); // 3.3 给鼠标悬浮的img标签的父标签添加类 this.parentNode.parentNode.setAttribute('class', 'active'); } } </script> </body> </html>
4 关闭小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04 关闭小广告</title> <style type="text/css"> *{ padding: 0; margin: 0; } #qe_code{ width: 180px; height: 160px; margin: 100px auto; position: relative; } #qe_code img{ position: absolute; right: 0; } #qe_code #close{ position: absolute; width: 18px; height: 18px; border: 1px solid #e0e0e0; text-align: center; line-height: 18px; cursor: pointer; color: #666; } </style> </head> <body> <div id="qe_code"> <img src="images/phone_taobao.png" id="code"> <span id="close">X</span> </div> <script type="text/javascript"> var closeSpan = document.getElementById('close'); var qe_code = document.getElementById('qe_code'); closeSpan.onclick = function(){ qe_code.style.display = 'none'; } </script> </body> </html>
05 图片切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url('images/big_pic1.jpg') no-repeat; } #box ul li{ display: inline-block; margin-right: 15px; } </style> </head> <body> <div id="box"> <ul> <li id="item1"> <img src="images/pic1.jpg"> </li> <li id="item2"> <img src="images/pic2.jpg"> </li> <li id="item3"> <img src="images/pic3.jpg"> </li> <li id="item4"> <img src="images/pic4.jpg"> </li> <li id="item5"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> // 初学者 小白 书写的方式 var item1 = document.getElementById('item1'); var item2 = document.getElementById('item2'); var item3 = document.getElementById('item3'); var item4 = document.getElementById('item4'); var item5 = document.getElementById('item5'); var oBox = document.getElementById('box'); item1.onmouseover = function(){ oBox.style.background = `url('images/big_pic1.jpg') no-repeat` } item2.onmouseover = function(){ oBox.style.background = `url('images/big_pic2.jpg') no-repeat` } item3.onmouseover = function(){ oBox.style.background = `url('images/big_pic3.jpg') no-repeat` } item4.onmouseover = function(){ oBox.style.background = `url('images/big_pic4.jpg') no-repeat` } item5.onmouseover = function(){ oBox.style.background = `url('images/big_pic5.jpg') no-repeat` } </script> </body> </html>
06 图片切换-2
<!DOCTYPE html> <html> <head> <title>06 图片切换-2</title> <style type="text/css"> *{ padding: 0; margin:0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url('images/big_pic1.jpg') no-repeat; } #box ul li{ display: inline-block; margin-right: 17px; } </style> </head> <body> <div id="box"> <ul> <li id="item1"> <img src="images/pic1.jpg"> </li> <li id="item2"> <img src="images/pic2.jpg"> </li> <li id="item3"> <img src="images/pic3.jpg"> </li> <li id="item4"> <img src="images/pic4.jpg"> </li> <li id="item5"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> function $(id) { return typeof id === 'string' ? document.getElementById(id) : null; } // console.log(id) function changebgcImg(id,imgSrc){ // 2.添加事件 $(id).onmouseover = function(){ // 3.改变背景图 $('box').style.background = imgSrc; } } changebgcImg('item1',`url('images/big_pic1.jpg') no-repeat`); changebgcImg('item2',`url('images/big_pic2.jpg') no-repeat`); changebgcImg('item3',`url('images/big_pic3.jpg') no-repeat`); changebgcImg('item4',`url('images/big_pic4.jpg') no-repeat`); changebgcImg('item5',`url('images/big_pic5.jpg') no-repeat`); </script> </body> </html>
07 图片切换完整版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07 图片切换 完整版</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url('images/big_pic1.jpg') no-repeat; } #box ul li{ display: inline-block; margin-right: 15px; } </style> </head> <body> <div id="box"> <ul> <li class="item"> <img src="images/pic1.jpg"> </li> <li class="item"> <img src="images/pic2.jpg"> </li> <li class="item"> <img src="images/pic3.jpg"> </li> <li class="item"> <img src="images/pic4.jpg"> </li> <li class="item"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> // 1.获取事件源 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.index = i+1; items[i].onmouseover = function(){ $('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`; } } </script> </body> </html>
08 百度换肤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08 百度换肤</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } #skin{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('images/skin1.jpg'); background-position: center 0; background-repeat: no-repeat; } #skin-photo{ width: 100%; height: 100px; position: relative; z-index: 10 } #skin-photo ul{ overflow: hidden; width: 1200px; margin: 0 auto; background-color: rgba(255,255,255,.5); } #skin-photo ul li{ float: left; cursor: pointer; height: 120px; margin: 10px 0 10px 96px; } #skin-photo ul li img{ width: 180px; height: 120px; } </style> </head> <body> <div id="skin"></div> <div id="skin-photo"> <ul> <li> <img src="images/skin1.jpg"> </li> <li> <img src="images/skin2.jpg"> </li> <li> <img src="images/skin3.jpg"> </li> <li> <img src="images/skin4.jpg"> </li> </ul> </div> <script type="text/javascript"> // 1.获取对应的图片 var skin = document.getElementById('skin'); var allItems = document.getElementsByTagName('li'); for(var i = 0; i < allItems.length; i++){ allItems[i].index = i + 1; allItems[i].onclick = function(){ skin.style.backgroundImage = ` url('images/skin${this.index}.jpg')` } } </script> </body> </html>
09 千千音乐盒
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09 千千音乐盒</title> <style type="text/css"> *{ padding: 0; margin: 0; } #panel{ background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 400px; padding: 20px; 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> <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; } // 1.获取所有的复选框 var inputs = document.getElementsByTagName('input'); // 2.全选 $('allSelect').onclick = function(){ for(var i = 0; i < inputs.length; i ++){ inputs[i].checked = true; } } // 3.取消选中 $('cancelSelect').onclick = function(){ for(var i = 0; i < inputs.length; i ++){ inputs[i].checked = false; } } // 4.反选 $('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>
10 表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10 表单验证</title> <style type="text/css"> *{ padding: 0; margin: 0; } #prompt{ font-size: 12px; 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 for='score'>您的成绩：</label> <input type="text" placeholder="请输入分数" id="score"> <span id="prompt">请输入您的成绩</span> </div> <script type="text/javascript"> function $(id){ return typeof id === 'string' ? document.getElementById(id) : null; } // input输入框失去焦点 $('score').onblur = function(){ // 1.获取输入的内容 var value = parseFloat(this.value); console.log(typeof value); // 2.验证 console.log(isNaN(value)); if(isNaN(value)){ //不是一个数 $('prompt').innerHTML = '输入的成绩不正确'; // $('prompt').setAttribute('class', 'error'); $('prompt').className = 'error'; this.style.borderColor = 'red'; }else if(value >= 0 && value <= 100){ // 合法的 $('prompt').innerHTML = '输入的成绩正确'; $('prompt').className = 'right'; this.style.borderColor = 'lightgreen'; }else{ // 超出成绩的范围 $('prompt').innerHTML = '成绩必须在0~100之间'; $('prompt').className = 'error'; this.style.borderColor = 'red'; } } // input输入框获取焦点 恢复原来的状态 $('score').onfocus = function(){ $('prompt').innerHTML = '请输入您的成绩'; $('prompt').className = ''; $('score').style.borderColor = 'darkgray'; $('score').style.outline = 'none'; $('score').value = ''; } </script> </body> </html>
11 上传图片验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>11 上传图片验证</title> <script type="text/javascript"> // jpg png gif jpeg window.onload = function(){ // 1.获取标签 var file = document.getElementById('file'); // 2.监听图片选择的变化 file.onchange = function(){ // 2.1 获取上传的图片路径 var path = this.value; //C:fakepath 1.gif // 2.2 获取.在路径字符串中占的位置 var loc = path.lastIndexOf('.'); // 2.3 截图 文件路径的后缀名 var suffix = path.substr(loc); // 2.4统一转小写 var lower_suffix = suffix.toLowerCase(); // 2.5 判断 // if(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg' || lower_suffix === '.gif' ){ // alert('上传图片格式正确'); // }else{ // alert('上传图片格式错误'); // } var list_end = ['.png','.jpg','.jpeg','.gif']; if (lower_suffix in list_end ) { alert('上传图片格式正确'); }else { alert('上传图片格式错误'); } } } </script> </head> <body> <label for="file">上传图片格式验证:</label> <input type="file" name="" id="file"> </body> </html>
12 随机验证码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12 随机验证码</title> <style type="text/css"> #code{ width: 100px; height: 100px; background-color: #ddd; padding: 10px; line-height: 100px; text-align: center; font-size: 20px; color: red; font-weight: bold; } input{ outline: none; } </style> </head> <body> <div id="code"></div> <input type="text" name="" id="newCode"> <input type="button" name="" id="validate" value="验证"> <script type="text/javascript"> window.onload = function(){ // 保存全局，与新输入的验证码进行校验 var code; // 1.获取对应的标签 var codeDiv = document.getElementById('code'); var newCodeInput = document.getElementById('newCode'); var validate = document.getElementById('validate'); // 加载页面获取对应的验证码 creatCode() // 1.获取min到max之间的整数 (1~100) function random(max,min){ return Math.floor(Math.random() * (max-min) + min); } function creatCode(){ // 设置默认的空的字符串 code = ''; // 设置长度 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++){ // 设置随机范围 0~36 var index = random(0,36); code += randomCode[index]; } codeDiv.innerHTML = code; } // 验证按钮校验 validate.onclick = function(){ // 获取用户新输入的验证码 var newCode = newCodeInput.value.toUpperCase(); if(newCode === code){ // 验证成功 跳转对应的网址 window.location.href = 'https://www.apeland.cn'; }else{ // 验证失败 alert('验证码不正确,请重新输入'); // 输入框置空 newCodeInput.value = ' '; // 重新获取验证码 creatCode(); } } function $(id){ return typeof id === 'string' ? document.getElementById(id) : null; } } </script> </body> </html>
13 发表评论
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13 发表评论</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; } #comment{ width: 80%; padding: 10px 10px; font-size: 20px; outline: none; } .box_top{ margin-bottom: 20px; } #comment_content li{ border-bottom: 1px dashed #ccc; width: 800px; 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="100" rows="10" placeholder="请输入您的评论"></textarea> <button id="btn">发布</button> </div> <ul id="comment_content"> </ul> </div> <script type="text/javascript"> window.onload = function(){ // 1.监听按钮的点击 $('btn').onclick = function(){ // 1.1 获取用户输入的内容 var content = $('comment').value; // console.log(content); // 1.2 判断 if(content.length === 0){ alert('请输入内容'); return; } // 1.3 创建li标签插入到ul中 var newLi = document.createElement('li'); newLi.innerHTML = `${content}<a href = 'javascript:void(0)'>删除</a>`; // $('comment_content').appendChild(newLi); console.log($('comment_content').children); $('comment_content').insertBefore(newLi,$('comment_content').children[0]); // 1.4 清空输入框中的内容 $('comment').value = ' '; // 1.5 删除评论 var delBtns = document.getElementsByTagName('a'); for(var i = 0; i < delBtns.length; i++){ delBtns[i].onclick = function(){ this.parentNode.remove(); } } }; function $(id){ return typeof id === 'string' ? document.getElementById(id) : null; } } </script> </body> </html>
14 九宫格布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14 九宫格布局</title> <style type="text/css"> *{ padding: 0; margin: 0; } #wrap{ overflow: hidden; } #wrap .item{ width: 248px; height: 360px; font-size: 13px; } #wrap .item .title{ width: 248px; height: 30px; line-height: 30px; overflow: hidden; margin-bottom: 10px; } .imgContainer{ width: 248px; display: table-cell; text-align: center; } #wrap .item .price{ color:#ff6700; font-size: 18px; font-weight: bold; } </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="images/taobao_1.jpg" alt=""> </div> <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_2.jpg" alt=""> </div> <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_3.jpg" alt=""> </div> <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_4.jpg" alt=""> </div> <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p> <p class="price">¥90</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_5.jpg" alt=""> </div> <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p> <p class="price">¥78</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_6.jpg" alt=""> </div> <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p> <p class="price">¥89</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_7.jpg" alt=""> </div> <p class="title">春季短款小外套女2019春装春秋新款韩</p> <p class="price">¥100</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_8.jpg" alt=""> </div> <p class="title">大码女装中长款针织衫春装胖mm显瘦</p> <p class="price">¥120</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_9.jpg" alt=""> </div> <p class="title">春款韩版2019新款女装时尚初春两件套</p> <p class="price">¥107</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_10.jpg" alt=""> </div> <p class="title">牛仔外套女短款2019春装新款女装韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_11.jpg" alt=""> </div> <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p> <p class="price">¥56</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_12.jpg" alt=""> </div> <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p> <p class="price">¥76</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_13.jpg" alt=""> </div> <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p> <p class="price">¥45</p> </div> </div> <script type="text/javascript"> // 1.获取标签 var btns = document.getElementsByTagName('button'); var items = document.getElementsByClassName('item'); // 2.监听按钮的点击 btns[0].onclick = function(){ // 3.循环 mjj_flex(3); } btns[1].onclick = function(){ mjj_flex(4) } btns[2].onclick = function(){ mjj_flex(5); } function mjj_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>
16 日期特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16 日期特效</title> <style type="text/css"> *{ padding: 0; margin: 0; } #date{ width: 450px; height: 300px; background-color: darkorange; border-radius: 10px; margin: 100px auto; } #nowDate{ width: 450px; height: 60px; line-height: 60px; text-align: center; color: #fff; font-size: 26px; background-color: blue; } #day{ width: 200px; height: 200px; line-height: 200px; background-color: orchid; margin: 0 auto; text-align: center; color:#fff; font-weight: bold; font-size: 60px; } </style> </head> <body> <div id="date"> <p id="nowDate"> </p> <p id="day"> </p> </div> <script type="text/javascript"> // 1.获取标签 var nowDate = document.getElementById('nowDate'); var day = document.getElementById('day'); // 用定时器 更新时间的变化 setInterval(nowNumTime, 10); setInterval(times,10); function times(){ var now = new Date(); var d = now.getDate(); times = day.innerHTML=d; } function nowNumTime(){ var now = new Date(); var hour = now.getHours(); //0 ~ 23. //19 var minute = now.getMinutes(); var second = now.getSeconds(); var year = now.getFullYear(); var month = now.getMonth(); var d = now.getDate(); var week = now.getDay(); //console.log(week); //索引 var weeks = ['星期天','星期一','星期二','星期叁','星期肆','星期伍','星期六']; // 18 > 12 ? 18-12 : 8 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; } </script> </body> </html>
17 定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17 定时器回顾</title> </head> <body> <button id="start">开启</button> <button id="stop">关闭</button> <script type="text/javascript"> // 1.获取标签 var start = document.getElementById('start'); var stop = document.getElementById('stop'); var num = 0,timer = null; start.onclick = function(){ // 使用定时器的时候 先清除定时器 再开启定时器 防止用户频繁性的开启定时器 clearInterval(timer); timer = setInterval(function(){ num++; console.log(num); },1000) } stop.onclick = function(){ clearInterval(timer); } </script> </body> </html>
18 transform的运用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>18 transform的运用</title> <style type="text/css"> #box{ width: 50px; height: 50px; background-color:red; /*transform: translate(100px,200px) rotate(10deg) scale(2.0) skew(10deg);*/ } </style> </head> <body> <button id="btn">形变</button> <div id="box"></div> <script> window.onload = function(){ var btn = document.getElementById('btn'); var box = document.getElementById('box'); var index = 0; btn.onclick = function(){ index++; box.style.transform = `translate(${index * 100}px,${index * 50}px) rotate(${index * 10}deg) scale(${index * 1.3})`; } } </script> </body> </html>
19 数字时钟案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19 数字时钟案例</title> <style type="text/css"> *{ padding: 0; margin: 0; } #clock{ width: 600px; height: 600px; background: url('images/clock.jpg') no-repeat; position: relative; } #hour,#minute,#second{ position: absolute; width: 10px; height: 600px; left: 50%; top: 0; margin-left: -15px; } #hour{ background: url('images/hour.png') no-repeat center center; } #minute{ background: url('images/minute.png') no-repeat center center; } #second{ background: url('images/second.png') no-repeat center center; } </style> </head> <body> <div id="clock"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> </div> <script type="text/javascript"> // 1.获取标签 var hour = document.getElementById('hour'); var minute = document.getElementById('minute'); var second = document.getElementById('second'); // 2.开启定时器 获取当前时间 setInterval(function () { // 2.1 获取当前的时间戳 var now = new Date(); // 2.2 获取小时 分钟 秒 var s = now.getSeconds(); var m = now.getMinutes() + s / 60; var h = now.getHours() % 12 + m / 60; // 2.3 旋转 second.style.transform = `rotate(${s * 6}deg)`; minute.style.transform = `rotate(${m * 6}deg)`; hour.style.transform = `rotate(${h * 30}deg)`; }, 10); </script> </body> </html>
20 长图滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20 长图滚动效果</title> <style> *{ 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; } #box span{ position: absolute; width: 100%; height: 50%; left: 0; cursor: pointer; } #box #top{ top: 0; } #box #bottom{ bottom: 0; } </style> </head> <body> <div id="box"> <!-- 658 4066 --> <img src="images/timer.jpeg" alt=""> <span id="top"></span> <span id="bottom"></span> </div> <script type="text/javascript"> // 1.获取标签 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 >= -3666){ pic.style.top = num + 'px'; }else{ clearInterval(timer); } },50); } 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>