js算法--进阶

2017-09-13 20:37:17来源:CSDN作者:qq_15349005人点击

分享
1.现提供几个读取文件的方法,不借助全局变量实现一个函数,函数可以执行一次后返回一个目录下所有文件中是 .js后缀的文件列表var readdirSync = function(dir_path){ return [filename] } //读取一个文件夹下的所有文件夹和文件的路径列(Arrayvar isDirectory = function(path) { return true/false; } //判断一个路径是否是文件夹var existsSync = function(path){ return true/false;} //判断一个文件/文件夹是否存在var getJSFiles = function(path) {}getJSFiles('/code/'); // return一个文件列表的数组2.鼠标展示图与星座运势--一个采用定义函数的方法,通过传递两个实参控制小图与背景之间的关系,一个通过数组的方式,利用select.value作为索引值,取数组中的不同值3.判断搜索框中是否有用户输入----oninput和onfocus、onblur实现的效果类似---oninput在用户输入的时候input框中的内容才消失,而onfocus在获得input框的焦点的时候内容就已经消失----两者都可以实现输入时原先内容消失的效果(1)<div class="search"><input type="text" id="txt"/><label for="txt" id="message">文字</label>//点击label的时候光标回到input里面</div>function $(id) { return document.getElementById(id);}$("txt").oninput=$("txt").onpropertychange=function(){if(this.value==""){ $("message").style.display="block";}else{ $("message").style.display="none";}}(2)<div class="search"><input type="text" id="txt" value="请输入..."><button id="btn">搜索</buon></div>function $(id) { return document.getElementById(id);}$("txt").onfocus=function(){if(this.value=="请输入..."){this.value=""; this.style.color="#333";}}$("txt").onblur=function(){if(this.value==""){this.value="请输入..."; this.style.color="#666";}}4.轮播图---无缝滚动及逐张更替<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><style>* {margin:0;padding:0; }img {vertical-align: top;}.w-slider {width: 1226px;height: 505px;margin:100px auto;position: relative;overflow: hidden;}.slider {width: 1226px;height: 460px;
}.slider-main {width: 1226px;height: 460px;}.slider-main-img {position: absolute;top: 0;left: 0;width: 1226px;height: 460px;}.slider-main-img img {width: 100%;}.slider-ctrl {text-align: center;padding-top: 5px;}.slider-ctrl-con {width: 24px;height: 20px;display:inline-block;background:url(image/icon.png) no-repeat -24px -782px ;margin: 0 5px;cursor: pointer;text-indent: -20em;overflow: hidden;}.current {background-position: -24px -762px;}.slider-ctrl-prev,.slider-ctrl-next {position: absolute;top: 50%;margin-top: -35px;background:url(image/icon.png) no-repeat 6px top;width: 30px;height: 35px;opacity: 0.8;cursor: pointer;}.slider-ctrl-prev {left: 0;}.slider-ctrl-next {right: 0;background-position: -6px -44px;}</style></head><body><div class="w-slider" id="js_slider"><div class="slider"><div class="slider-main" id="slider_main_block"><div class="slider-main-img"><a href="#"><img src="image/00001.jpg" alt=""/></a></div><div class="slider-main-img"><a href="#"><img src="image/00002.jpg" alt=""/></a></div><div class="slider-main-img"><a href="#"><img src="image/00003.jpg" alt=""/></a></div><div class="slider-main-img"><a href="#"><img src="image/00004.jpg" alt=""/></a></div><div class="slider-main-img"><a href="#"><img src="image/00005.jpg" alt=""/></a></div></div></div><div class="slider-ctrl" id="slider_ctrl"><span class="slider-ctrl-prev"></span><span class="slider-ctrl-next"></span></div></div> <!-- <script src="animate.js" type="text/javascript"></script> --><!-- <script src="slider.js" type="text/javascript"></script> --><script>window.onload=function(){function $(id) {return document.getElementById(id);}var js_slider = $("js_slider"); // 获取最大盒子var slider_main_block = $("slider_main_block"); // 滚动图片的父亲var imgs = slider_main_block.children; // 获得所有的图片组 需要滚动的部分var slider_ctrl = $("slider_ctrl"); // 获得 控制span 的 父盒子// 创建spanfor(var i=0;i<imgs.length; i++) {
var span = document.createElement("span");// 创建 spanspan.className = "slider-ctrl-con"; // 添加类名span.innerHTML = imgs.length-i; // 6 - 0 6 - 1 // 实现 倒序 的方式插入slider_ctrl.insertBefore(span,slider_ctrl.children[1]); // 再 父亲 倒数第二个盒子的前面插入}// 下面的第一个小span 是默认的蓝色var spans = slider_ctrl.children; // 得到所有的 spanspans[1].setAttribute("class","slider-ctrl-con current"); // 两个类名// 设置动画var scrollWidth = js_slider.clientWidth;// 显示第一张,其他放在后面for(var i=1;i<imgs.length;i++){imgs[i].style.left=scrollWidth+"px";}// 遍历三个按钮// spans 是 8个按钮 他们都是 spanvar iNow = 0; // 用来 控制播放张数for(var k in spans){ // k 是索引号 spans[k] spans[0] 第一个spanspans[k].onclick = function() {// alert(this.innerHTML);if(this.className == "slider-ctrl-prev"){ // 判断当前点击的这个按钮是不是 prev// alert("您点击了左侧按钮");// 当我们左侧点击时候, 当前的这张图片 先慢慢的走到右边 上一张 一定先快速走到左侧 (-310)的位置,然后慢慢的走到舞台中animate(imgs[iNow],{left: scrollWidth});--iNow < 0 ? iNow = imgs.length - 1 : iNow;imgs[iNow].style.left = -scrollWidth + "px";animate(imgs[iNow],{left: 0});setSquare();}else if(this.className == "slider-ctrl-next") { // 右侧按钮开始autoPlay();}else {// alert("您点击了下面的span");// 我们首先要知道我们点击是第几张图片 --- 获得当前的索引号// alert(this.innerHTML);var that = this.innerHTML - 1;// console.log(typeof that);if(that > iNow) {// 做法等同于 右侧按钮animate(imgs[iNow],{left: -scrollWidth}); // 当前的这张慢慢的走出去 左侧imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧 310}else if(that < iNow) {// 做法等同于 左侧按钮animate(imgs[iNow],{left: scrollWidth});imgs[that].style.left = -scrollWidth + "px";}iNow = that; // 给当前的索引号animate(imgs[iNow],{left: 0});/*比如 已经播放到 第4张 我点击了 第2张 把 2 给 inow下一次播放,应该播放第3张*/// animate(imgs[iNow],{left: 0});setSquare();}}}// 一个可以控制 播放span 的 函数 当前function setSquare() {// 清除所有的span current 留下 满足需要的拿一个for(var i=1;i<spans.length-1;i++){ // 8个span 我们要 1-6 不要 7 索引号spans[i].className = "slider-ctrl-con";}spans[iNow+1].className = "slider-ctrl-con current"; // 记住 + 1}// 定时器开始 其实, 定时器就是 右侧按钮var timer = null;timer=setInterval(autoPlay, 1000);function autoPlay(){animate(imgs[iNow],{left: -scrollWidth});// 当前的那个图片 慢慢的走到 -scrollWidth 位置// 变成1 先 ++ ++iNow 先自加 后 运算++iNow > imgs.length -1 ? iNow = 0 : iNow;imgs[iNow].style.left = scrollWidth + "px"; // 立马执行 快速走到右侧animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置 慢慢走过来setSquare(); // 调用square}js_slider.onmouseover=function(){clearInterval(timer);}js_slider.onmouseout=function(){clearInterval(timer);timer=setInterval(autoPlay, 1000);}/*** Created by andy on 2015/11/23.*/// 多个属性运动框架 添加回调函数function animate(obj,json,fn) { // 给谁 jsonclearInterval(obj.timer);obj.timer = setInterval(function() {var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面for(var attr in json){ // attr 属性 json[attr] 值//开始遍历 json// 计算步长 用 target 位置 减去当前的位置 除以 10// console.log(attr);var current = 0;if(attr == "opacity"){current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;console.log(current);}else{current = parseInt(getStyle(obj,attr)); // 数值}// console.log(current);// 目标位置就是 属性值var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10step = step > 0 ? Math.ceil(step) : Math.floor(step);//判断透明度if(attr == "opacity") // 判断用户有没有输入 opacity{if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity{// obj.style.opacityobj.style.opacity = (current + step) /100;}else{ // obj.style.filter = alpha(opacity = 30)obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}}else if(attr == "zIndex"){obj.style.zIndex = json[attr];}else{obj.style[attr] = current + step + "px" ;}
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面{flag = false;}}if(flag) // 用于判断定时器的条件{clearInterval(obj.timer);//alert("ok了");if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调{fn(); // 函数名 + () 调用函数 执行函数}}},10)}function getStyle(obj,attr) { // 谁的 那个属性if(obj.currentStyle) // ie 等{return obj.currentStyle[attr]; // 返回传递过来的某个属性}else{return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器}}}</script></body></html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台