JS 篇（7）

最新推荐文章于 2023-07-10 23:28:03 发布

Dawn___

最新推荐文章于 2023-07-10 23:28:03 发布

阅读量304

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/Dawn___/article/details/69343153

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

复习JS(6)：
1.按钮不可用:disabled = “disabled”||true
2.setTimeout 只执行一次 setInerval执行很多次
3.递归调用：函数自身的调用，不提倡用函数名，而是arguments.callee，返回的是正在执行的函数本身
4.根据位置返回字符
charAt（索引号）；
charCodeAt(索引号)；

1.根据字符返回位置

①返回前面起第一个字符的位置：indexOf(“字符”)
从左边开始数，而且只找第一个，返回该字符的位置，索引号都是从0开始的；如果找不到就返回-1
②返回后面起第一个字符的位置：lastIndexOf(参数：索引字符串)
注意：返回的值还是从左边开始数的索引号

2.网址编码

将网址传入后台前要先实现编码，避免出现后台不认识的特殊符号
encodeURIComponent()函数可把字符串作为URI 组件进行编码
dencodeURIComponent()函数可把字符串作为URI 组件进行解码

    var url = "http://www.itcast.cn?name=andy";
    console.log(encodeURIComponent(url));  // 编码
    var afterUrl = encodeURIComponent(url);
    console.log(decodeURIComponent(afterUrl));  // 解码

结果：
这里写图片描述

3.操作字符串

3.1concat()连接字符串

    var  txt1 = “456”;
    var txt2 = ”ger”;
    console.log(txt1.concat(txt2));

结果： “456ger”

3.2取字符串

3.2.1 slice()

slice(“取字符串的起始位置”，[结束位置])；
注意;[结束位置]是可有可无的，但是起始位置一定要有

例如：var txt = “abcedf”;

txt.slice(3) 从 txt 里面字符的第 3（索引号）个开始取，结束位置省略，一直取到最后一个。

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

起始位置可以是负数，如果是负数，则是从右边往左边开始取。
例如： var txt =”asdf”;
txt.slice(-1) 结果是 f

3.2.2substr()

substr(起始位置，[取的个数])

用法同slice
ubstr(-1) 尽量少用，ie678 报错。

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

substring 同slice用法相同，但是有一点不同
substring 始终会把小的值作为起始位置，大的值作为结束位置
例如： substring(6,3) 实际中自动变成 substring(3,6);

保留小数位数

保留两位小数的三种写法：

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

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

先乘以100 取整然后除以100

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

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

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

验证文件格式是否正确

    <!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>
    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>
   // $("#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>

无缝滚动

    <!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 timer = null;  // 定时器
    var num = 0;
    timer = setInterval(autoPlay,5);
    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>

匀速运动

    <!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>

缓动动画

一个盒子的初始值是0，要走到400px的位置初始值leader = 0,target = 400;

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

    <!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 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;
    }
    .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 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>

这里写图片描述

Dawn___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 篇（7）

复习JS(6)： 1.按钮不可用:disabled = “disabled”||true 2.setTimeout 只执行一次 setInerval执行很多次 3.递归调用：函数自身的调用，不提倡用函数名，而是arguments.callee，返回的是正在执行的函数本身 4.根据位置返回字符 charAt（索引号）； charCodeAt(索引号)；1.根据字符返回位置①返回前面起第一
复制链接

扫一扫