js基础第八天

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

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 {
              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 {
              600px;
             height: 200px;
             margin: 100px auto;
             background-color: pink;
             position: relative;
             overflow: hidden;
         }
         .box ul li {
             float: left;
         }
         .box ul {
              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 {
              490px;
             height: 170px;
             border:1px solid #ccc;
             margin: 100px auto;
             padding:5px;
             position: relative;
         }
         .inner {
              100%;
             height: 100%;
             background-color: pink;
             position: relative;
             overflow: hidden
         }
         .inner ul {
              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;
              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{490px;height:170px;padding:5px;
             position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
         .ad{490px;height:170px;overflow:hidden;position:relative;}
         #box img{490px;}
         .ad ol{position:absolute;right:10px;bottom:10px;}
         .ad ol li{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; 2940px;}
         .ad ul li.current{display:block;}
         #arr {
             display: none;}
         #arr span{ 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>

相关阅读:
02梦断代码阅读笔记之二
 每日日报
 每日日报
 每日日报
 每日日报
 02梦断代码阅读笔记之一
 每日日报
 SQL语句分为哪几种？
数据库三范式是什么？
什么是数据库事务？
原文地址：https://www.cnblogs.com/yiningfamily/p/4976437.html

热门文章
百度小程序
 ArrayBuffer
微信生成二维码
 uni-app （二）
百度小程序
 uni-app （-）
跨域下载图片
 每日日报
 每日日报
 每日日报