js算法--进阶

来源：互联网发布：java 前景知乎编辑：程序博客网时间：2024/06/06 01:41

1.现提供几个读取文件的方法，不借助全局变量实现一个函数，函数可以执行一次后返回一个目录下所有文件中是 .js后缀的文件列表

var readdirSync = function(dir_path){ return [filename] } //读取一个文件夹下的所有文件夹和文件的路径列（Array）

var 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 的 父盒子

// 创建span

for(var i=0;i<imgs.length; i++) {

var span = document.createElement("span");// 创建 span

span.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; // 得到所有的 span

spans[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个按钮 他们都是 span

var iNow = 0; // 用来 控制播放张数

for(var k in spans){ // k 是索引号 spans[k] spans[0] 第一个span

spans[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) { // 给谁 json

clearInterval(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; // 步长 用目标位置 - 现在的位置 / 10

step = step > 0 ? Math.ceil(step) : Math.floor(step);

//判断透明度

if(attr == "opacity") // 判断用户有没有输入 opacity

{

if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity

{

// obj.style.opacity

obj.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>

阅读全文

0 0