返回前面起第一个字符位置

indexOf(“sdfsdf”);它是从左边索引为0开始数,而且只找第一个,然后返回该字符的位置。返回是个数值。如果找不到该字符,那么就会返回-1。

返回后面起第一个字符位置

lastIndexOf(“sdfsdf”);它是从左边索引为0开始数,只找最后一个的字符位置。返回的是数值。

操作字符串(合并字符串、取字符串)

concat()连接字符串

var txt1 = “abc”;

var txt2 = ”123”;

console.log(txt1.concat(txt2)); “abc123”;

slice()

slice(“字符串的起始位置”, [结束位置]) ; [] 可写可不写,若不写直接取到最后,得到的是字符串。

slice(3,6) 3是从索引号3开始取;6是取到第6索引号的位置,还是从左边的第0个开始数。 但是不包含索引号6的字符。

起始位置可以是负数,如果是负数,则是从右边往左边开始取。

var txt =”asdf”;

txt.slice(-1) 结果是f

substr(起始位置,[取的个数]);若不写[],那么默认取到最后。如果写的话从当前位置往后取多少。得到的是字符串

var txt = “abcdefghijk”;

txt.substr(3,4);

从第3个 (d) 开始 数 4个 defg

substr(-1) 少用 ie678 报错 。 尽量少用

取最后一个的方法:因为索引号长度比它本身少一个,所以要减1

   onBtnClick("btn7",div1.substr(div1.length-1,1));  // 兼容的写法

substring 同slice一样的,但是有一点不同。substring 始终会把小的值作为起始位置,大的值作为结束位置。得到的是字符串。

保留小数位数

122340.12345 保留两位有效小数 122340.12

substr(0, .+3)

1.console.log(str.substr(0,str.indexOf(".")+3));

通过 indexOf 返回小数点的位置 截取字符串

2 console.log(parseInt(PI*100) /100);

先乘以100 取整 然后 除以100

 3 console.log(PI.toFixed(2));

pi.toFixed(2) 保留 2位 小数

网页编码

我们知道一个网址 自己的网址, 不同页面也有自己id网址, 我们经常会做一些, 把网址送入到后台。 但是后台再处理的 不认识比如 换行啊 等特殊符号的 ?

var url = “http://www.itast.cn?name=cz”

所以我们要实现编码,然后再传到后台。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码

decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

上传正确格式文件案例

<script>
     var file = document.getElementById("File");
     file.onchange = function() {
         var path = this.value;
         var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
         if(suxxif == ".JPG"||suxxif==".PNG")
         {
             this.nextSibling.innerHTML="格式正确";
         }
         else
         {
             this.nextSibling.innerHTML="格式不正确";
         }
     }
</script>

$ 仿jquery选择器案例

这个重点的意思是,在前面我们做了class类的封装,然后最后可以直接调用来控制样式。那么我们通常会见到jq里面$("#demo") $(".one") $("div")这几种,那么如何统一封装一个类,然后直接进行调用呢?就需要把#、.与后面的类名分开,然后判断如果为#,直接调用后面的类名,如果为.那么使用前面封装好的class进行控制。如果什么都没有的话,直接使用这个类名。最后使用的时候可以直接调用,案例如下:

<!DOCTYPE html>
<html>
<head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         div {
             width: 100px;
             height: 100px;
             background-color: pink;
             margin: 10px;
         }
     </style>
</head>
<body>
<div id="demo"></div>
<div></div>
<div></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>
</body>
</html>
<script>
     //function $(id) {return document.getElementById(id)}  //id选择器      function getClass(classname)   //  类的写法
     {
         //判断支持否
         if(document.getElementsByClassName)
         {
             return document.getElementsByClassName(classname);
         }
         var arr = []; //用于返回 数组
         var dom = document.getElementsByTagName("*");
         for(var i=0;i<dom.length;i++)  // 遍历所有的 盒子
         {
             var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
             //  ["demo","test"];
             for(var j=0;j<txtarr.length;j++)  // 遍历 通过类名分割的数组
             {
                 if(txtarr[j] == classname)
                 {
                     arr.push(dom[i]); // 我们要的是 div
                 }
             }
         }
         return arr;
     }      // $("#demo")   $(".one")   $("div")
     //封装自己的$
     function $(str) {
         var s = str.charAt(0);   //  一个s 的变量 存放是 符号  #  .
         var ss = str.substr(1);  // demo
         switch(s)
         {
             case "#":
                 return document.getElementById(ss);
                 break;
             case ".":
                 return getClass(ss);
                 break;
             default :
                 return document.getElementsByTagName(str);
         }
     }      $("#demo").style.backgroundColor = "purple";
     $("#last").style.backgroundColor = "purple";
     var test = $(".one");
     for(var i=0;i<test.length;i++)
     {
         test[i].style.backgroundColor = "blue";
     } </script>

无缝滚动案例

原理:一个大盒子里面包着一个盒子,盒子的宽可以设为1000%,大盒子设置overflow: hidden;然后再这个盒子里放图,如果原本有4张图,那么就要放6张图,4张原图,第四第五张图为第一第二张图。这个盒子里可以显示2张图,那么当走到第5张和第6张出现的时候,要设定定时器setInterval,当走过第四张图,第五张图到达位置的时候立即设定左的位置是0,也就是返回到第一张图,由于切换速度很快,人们根本看不出来,所以会有无缝滚动的效果。其次当鼠标移到图片上时,要清理定时器,当鼠标移 开的时候,定时器要继续。

ul 是盒子移动的, 如果ul 的left 值 大于等于 4张图片的宽度,就应该快速复原为0 。

<style>/*注意CSS*/
         *{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>
        <script>
         window.onload = function() {
             var scroll = document.getElementById("scroll");
             var ul = scroll.children[0];
             var timer = "";
             var num = 0;
             timer = setInterval(autoPlay,20);
             function autoPlay() {
                 num--;
                 num<=-1200 ? num=0 : num ;
                 ul.style.left = num +"px";
             }
             scroll.onmouseover = function() {
                 clearInterval(timer);
             }
             scroll.onmouseout = function() {
                 timer = setInterval(autoPlay,20);
             }
         }
     </script>
</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>
     window.onload = function() {
         var bx =document.getElementById("bx");
         var btn = document.getElementById("btn");
         var num = 0;
         var timer = "";
         btn.onclick = function() {
             timer = setInterval(function(){
                 num++;
                 num<=500 ? num : clearInterval(timer);
                 bx.style.left = num +"px";
             },10);
         }
     }
</script>

缓速动画

缓动动画公式:

一个盒子初始值 是 0 要走到 400 px 的位置

假如说,初始值 leader 0 target 400

box.style.left = xxxx + “px”

leader = leader + (target - leader ) /10 ;

<script>
     window.onload = function() {
         var bx = document.getElementById("bx");
         var btn = document.getElementById("btn");
         var timer = "";
         var leader = 0;
         var target = 500;
         btn.onclick = function() {
             timer = setInterval(function(){
                 leader = leader+(target - leader )/50;
                 bx.style.left = leader + "px";
             },10);          }
     }
</script>

自己创建节点方面暂时不是重点,我们先要把布局机理搞清楚,以后再加。

轮播焦点图案例

<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>
        <script>
         window.onload = function() {
             var jd = document.getElementById("jd");
             var ul = jd.children[0].children[0];
             var ol = jd.children[1];
             var ollis = ol.children;
             var leader = 0;
             var target =0;
             for(var i=0;i<ollis.length;i++)
             {
                 ollis[i].index = i;
                 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)/20;
                 ul.style.left = leader+"px";
             },30);
         }
     </script>
</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>

左右焦点图案例

<!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;
     var target = 0;
     var timer = "";
     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>

js基础第八天的更多相关文章

  1. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  3. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  4. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  5. JS基础(超级简单)

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  6. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

随机推荐

  1. poj 3522 Slim Span (最小生成树kruskal)

    http://poj.org/problem?id=3522 Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions ...

  2. Comet、SSE、Web Socket

    来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(十一) Comet Comet是一种更加高级的Ajax技术("服务器推送&qu ...

  3. Exploring the 7 Different Types of Data Stories

    Exploring the 7 Different Types of Data Stories What makes a story truly data-driven? For one, the n ...

  4. "Principles of Reactive Programming" 之<Actors are Distributed> (3)

    Cluster 讲课的这哥们接下来讲了下Akka Cluster的使用,但是是通过把一个以前讲过的actor 系统改成使用cluster来介绍的Akka cluster. 这部分代码很多,还是直接看视 ...

  5. 【leetcode】Divide Two Integers (middle)☆

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

  6. UrlRewriteFilter 美化器的使用方法 伪静态化的解决方案(转)

    一,URL美化器简介 UrlRewriteFilter是一个用于改写URL的Web过滤器,类似于Apache的mod_rewrite.适用于任何Web应用服务器(如Resin,Orion,Tomcat ...

  7. 关于MIM金属注射成型技术知识大全

    1.什么是MIM MIM即(Metal Injection Molding)是金属注射成型的简称.是将金属粉末与其粘结剂的增塑混合料注射于模型中的成形方法.它是先将所选粉末与粘结剂进行混合,然后将混合 ...

  8. Android:控件ProgressBar进度条

    各种进度条属于 ProgressBar的子类 设置style: 环形进度条   style="?android:attr/progressBarStyleLarge" 横向进度条, ...

  9. ORA-00911 :无效字符

    ———————————————————————————————————————————————————— 附: 1   ORA-01790:表达式必须具有与对应表达式相同的数据类型 知识解析:SQL ...

  10. 再分析 返回值加引用&,const

    本文主要分析,返回&,和返回值加const的作用. 返回& 定义一个数组模板: template<class T>class Array{ enum{size = 100} ...