夜光带你走进前端工程师（四十二 jS ）

最新推荐文章于 2019-06-03 22:48:48 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-03 22:48:48 发布

阅读量150

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90717507

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

孤高所以至高。

所谓真正的英雄就是一个人。因为孤高所以强大。

没有持有羁绊也就是说没有必须守护的东西。必须守护的东西换言之就是弱点。

因此没有弱点、没有必须守护的东西、和别人没有联系的人才是最强的。

正文：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .xiaomi {
            width: 512px;
            height: 400px;
            border: 1px solid #f00;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .xiaomi span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }
        .up {
            top: 0;
        }
        .down {
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="xiaomi">
    <img src="mi.png" alt=""/>
    <span class="up"></span>
    <span class="down"></span>
</div>
</body>
</html>             //css 部分
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .xiaomi {
            width: 512px;
            height: 400px;
            border: 1px solid #f00;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .xiaomi span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }
        .up {
            top: 0;
        }
        .down {
            bottom: 0;
        }
        #pic {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="xiaomi">
    <img src="mi.png" alt="" id="pic"/>
    <span class="up" id="picUp"></span>
    <span class="down" id="picDown"></span>
</div>
</body>
</html>
<script>
    function $(id) { return document.getElementById(id);}
    var num = 0; // 控制图片的top值
    var timer = null; // 定时器名称
    $("picUp").onmouseover = function(){
         // alert(11);
        clearInterval(timer);
        timer =  setInterval(function(){
             num -= 3;
             num >= -1070 ? $("pic").style.top = num + "px" :  clearInterval(timer);

         },30);
    }
    $("picDown").onmouseover = function(){
        clearInterval(timer);
          timer  = setInterval(function(){
              num++;
             num < 0 ?  $("pic").style.top = num + "px" : clearInterval(timer);
          },30);
    }
    $("picUp").parentNode.onmouseout = function() {
        clearInterval(timer);
    }
</script>

五秒后自动关闭广告

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: absolute;
            top: 0;

        }
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
    </style>
</head>
<body>
<img src="1.gif" alt="" id="left"/>
<img src="2.gif" alt="" id="right"/>

<p>夜光设计</p>
</body>
</html>
<script>
     function $(id) { return document.getElementById(id);} // id函数
     function hide(id) {   // 隐藏函数
         $(id).style.display = "none";
     }
     function show(id) {
         $(id).style.display = "block";
     }
     setTimeout(closeAd,5000);
     function closeAd() {
         hide("left");
         hide("right");
     }
</script>

复习

按钮不可用 disabled = “disabled” || true
setTimeout 只执行一次 setInterval 执行很多次
递归调用：函数自己调用自己函数递归调用不提倡用函数名而喜欢用的是 arguments.callee 返回的是正在执行的函数本身
逻辑运算符与 && 或 || 非！ ! > && > ||
2&&0 0 1&&8 0&&3 0 1||0
转换为字符型
    var num = 12345;
    num+ “”
    String(num);
    num.toString();   10进制
    num.toString(2)   二进制
根据字符位置返回字符
charAt(索引号)

var txt = “abcde”;

txt.charAt(3); d

charCodeAt(3) unicode 编码 97 100

根据字符返回位置

跟 charAt() 相反的根据字符返回的是位置

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

indexOf(“字符”);

它是从前面开始数（从左边开始数），而且只找第一个，然后返回改字符的位置，索引号都是从0开始的。返回的是个数值。

var txt = “abcdef”;

alert(txt.indexOf(“d”)) 结果就是 3

如果找不到该字符返回 -1

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

lastIndexOf(参数：索引字符串)

从后面开始数同上

var txt = “abcdef” ;

txt.lastIndexOf(“d”); 3

返回的值，还是从左边开始数的索引号。

网址编码

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

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

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

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

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

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（四十二 jS ）

夜光序言：孤高所以至高。所谓真正的英雄就是一个人。因为孤高所以强大。没有持有羁绊也就是说没有必须守护的东西。必须守护的东西换言之就是弱点。因此没有弱点、没有必须守护的东西、和别人没有联系的人才是最强的。正文：<!DOCTYPE html><html><head lang="en">...
复制链接

扫一扫