JS05(字符串操作、上传正确格式文件、匀速运动、缓动动画、鼠标小圆点焦点图切换、无缝滚动、点击左右轮播图)
字符串操作
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { var div1 = document.getElementById("div1").innerHTML; var div2 = document.getElementById("div2").innerHTML; function onBtnClick(id,txt) { document.getElementById(id).onclick = function() { this.nextSibling.innerHTML = txt; //他的下一个兄弟 内容变成 txt } } onBtnClick("btn1",div1.concat(div2)); onBtnClick("btn2",div1.slice(3)); // 从第3个开始取，一直取到最后 onBtnClick("btn3",div1.slice(3,6)); // 3 从 第3个开始 取 6 取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。 onBtnClick("btn4",div1.slice(-1)); // 从右边开始取 //substr组 onBtnClick("btn5",div1.substr(3)); // onBtnClick("btn6",div1.substr(3,6)); // onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法 // substring 组 onBtnClick("btn8",div1.slice(6,3)); onBtnClick("btn9",div1.substring(6,3)); } </script> </head> <body> <div id="div1">my name is andy!</div> <div id="div2">what's your name?</div> <button id="btn1">concat</button><span></span> <br/> <button id="btn2">slice(3)</button><span></span> <br/> <button id="btn3">slice(3,6)</button><span></span> <br/> <button id="btn4">slice(-1)</button><span></span> <br/> <button id="btn5">substr(3)</button><span></span> <br/> <button id="btn6">substr(3，6)</button><span></span> <br/> <button id="btn7">substr(-1) 兼容</button><span></span> <br/> 区别 <button id="btn8">slice(6,3)</button><span></span> <br/> <button id="btn9">substring(6,3)</button><span></span> <br/>
上传正确格式文件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" name="" id="File"/><span></span> <!--文件域--> </body> </html> <script> var file = document.getElementById("File"); file.onchange = function() { //alert(11); //alert(this.value); // c:/adfasdf.ss.jpg 需要点 从后面开始 再字符串中的位置 var path = this.value; // 得到的是现在的文件路径 var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase() // 得到的是 后缀名 并且转换为大写 //alert(suxxif); if(suxxif == ".JPG" || suxxif == ".PNG") { this.nextSibling.innerHTML = "格式正确"; } else { this.nextSibling.innerHTML = "格式错误的"; } } </script>
匀速运动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { position: absolute; top:100px; left:0; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <button id="btn">开始</button> <div class="box" id="bOX"> </div> </body> </html> <script> var btn = document.getElementById("btn"); var box = document.getElementById("bOX"); var num = 0; var timer = null; btn.onclick = function() { timer = setInterval(function(){ num++; if(num >=500) { clearInterval(timer); } else { box.style.left = num + "px"; } },10) } </script>
缓动动画
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { position: absolute; top:100px; left:0; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <!-- num+=5; box.style.left = num + "px"; leader = leader + (target - leader ) / 10 leader 初始 0 target 结束位置 100 leader = 10; 步长 10 19 19--> <button id="btn">开始</button> <div class="box" id="bOX"></div> </body> </html> <script> var btn = document.getElementById("btn"); var box = document.getElementById("bOX"); var timer = null; var leader = 0; var target = 500; btn.onclick = function() { setInterval(function(){ leader = leader + (target - leader )/10; box.style.left = leader + "px"; },30) } </script>
鼠标小圆点焦点图切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} ul,ol{list-style:none;} img { display: block; /* 清除图片底册 3像素缝隙*/ } .slider { width: 490px; height: 170px; border:1px solid #ccc; margin: 100px auto; padding:5px; position: relative; } .inner { width: 100%; height: 100%; background-color: pink; position: relative; /*overflow: hidden*/ } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner ul li { float: left; } .slider ol { position: absolute; left: 50%; margin-left: -80px; bottom: 10px; } .slider ol li{ float: left; width: 18px; height: 18px; background-color: #fff; margin-right: 10px; text-align: center; line-height: 18px; cursor: pointer; } .slider ol li.current { background-color: orange; } </style> </head> <body> <div class="slider" id="jd"> <div class="inner"> <ul> <li><a href="#"><img src="images/01.jpg" alt=""/></a></li> <li><a href="#"><img src="images/02.jpg" alt=""/></a></li> <li><a href="#"><img src="images/03.jpg" alt=""/></a></li> <li><a href="#"><img src="images/04.jpg" alt=""/></a></li> <li><a href="#"><img src="images/05.jpg" alt=""/></a></li> </ul> </div> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html> <script> var jd = document.getElementById("jd"); var ul = jd.children[0].children[0]; var ol = jd.children[1]; var olLis = ol.children; var leader = 0, target = 0; // target 目标位置 for(var i=0; i<olLis.length; i++) { olLis[i].index = i; // 每个li 的索引号 olLis[i].onmouseover = function() { for(var j=0;j<olLis.length;j++) { olLis[j].className = ""; } this.className = "current"; target = -this.index * 490; // 目标位置 就是用当前的索引号乘以 一个盒子的宽度 } } setInterval(function() { leader = leader + (target - leader ) / 10; ul.style.left = leader + "px"; },30); </script>
无缝滚动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul{list-style:none;} img {vertical-align: top; } /*取消图片底部3像素距离*/ .box { width: 600px; height: 200px; margin: 100px auto; background-color: pink; position: relative; overflow: hidden; } .box ul li { float: left; } .box ul { width: 400%; position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="box" id="scroll"> <ul> <li><img src="images/01.jpg" alt=""/></li> <li><img src="images/02.jpg" alt=""/></li> <li><img src="images/03.jpg" alt=""/></li> <li><img src="images/04.jpg" alt=""/></li> <li><img src="images/01.jpg" alt=""/></li> <li><img src="images/02.jpg" alt=""/></li> </ul> </div> </body> </html> <script> var scroll = document.getElementById("scroll"); var ul = scroll.children[0]; var num = 0; //控制左侧值 left var timer = null; // 定时器 var leader = 0,target = 0; timer = setInterval(autoPlay,1); function autoPlay() { target --; // num--; //console.log(num); target<=-1200 ? target = 0 : target; leader = leader + (target - leader) / 10; ul.style.left = leader + "px"; } scroll.onmouseover = function() { // 鼠标经过大盒子 停止定时器 clearInterval(timer); } scroll.onmouseout = function() { timer = setInterval(autoPlay,20); // 开启定时器 } </script>
点击左右轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body,ul,ol,li,img{margin:0;padding:0;list-style:none;} #box{width:490px;height:170px;padding:5px; position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;} .ad{width:490px;height:170px;overflow:hidden;position:relative;} #box img{width:490px;} .ad ol{position:absolute;right:10px;bottom:10px;} .ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;} .ad ol li.current{background:yellow;} .ad ul li{float:left;} .ad ul{ position:absolute; top:0; width:2940px;} .ad ul li.current{display:block;} #arr { display: none;} #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;} #arr #right{right:5px; left:auto;} </style> </head> <body> <div id="box" class="all"> <div class="ad"> <ul id="imgs"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/5.jpg" /></li> </ul> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> </body> </html> <script> function $(id) {return document.getElementById(id)} var box = document.getElementById("box"); box.onmouseover = function() { $("arr").style.display = "block"; } box.onmouseout = function() { $("arr").style.display = "none"; } $("right").onclick = function() { target -= 490; } $("left").onclick = function() { target += 490; } //缓动动画 var leader = 0,target = 0; setInterval(function() { if(target >= 0) { target = 0; } else if(target <= -1960) { target = -1960; } leader = leader + (target - leader) / 10; $("imgs").style.left = leader + "px"; },30) </script>
