2018年4月

描述：当用户点击关闭按钮的时候，广告栏会逐渐变为透明，最后关闭
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟京东广告栏的关闭</title>
    <style>
        .top-banner{
            height: 80px;
            background: #ff551d;
        }
        .w{
            background: #b82518;
            width: 1200px;
            height: 80px;
            margin: 0 auto;
            position: relative;
        }
        a{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            background-color: #000;
            color: #fff;
            text-decoration: none
        }
    </style>
</head>
<body>
    <div class="top-banner" style="opacity: 1">
        <div class="w">
            <a href="#">×</a>
        </div>
    </div>
</body>
</html>
<script>
    var topBammer = document.getElementsByClassName("top-banner")[0];
    var a = document.getElementsByTagName("a")[0];
    var timer = null;
    a.onclick = function () {
        timer = setInterval(function () {
            topBammer.style.opacity -= 0.1;
            if(topBammer.style.opacity<0){
                topBammer.style.display = "none";
                clearInterval(timer);
            }
        },50);
    }
</script>

描述：当用户打开页面之后，显示对联广告，广告在5秒之后关闭。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时关闭广告</title>
    <style>
        *{
            margin: 0;
            border: 0;
        }
        .content{
            width: 1200px;
            height: 1200px;
            //background: coral;
            margin: 0 auto;
        }
        img{
            position: fixed;
            top: 50%;
            margin-top: -220px;
        }
        .img1{
            left: 10px;
        }
        .img2{
            right: 10px;
        }
    </style>
</head>
<body>
<div class="content"></div>
<img class="img1" src="./images/1.gif" alt="">
<img class="img2" src="./images/2.gif" alt="">
</body>
</html>
<script>
    window.onload = function () {
        var imgArr = document.getElementsByTagName("img");
        setTimeout(fn,5000);
        function fn() {
            imgArr[0].style.display = "none";
            imgArr[1].style.display = "none";
        }
    }
</script>

location

window.location

  • location相当于浏览器地址栏
  • 可以将url解析成独立的片段

location对象的属性

  • href
  • hash 返回url中#后面的内容，包含#
  • host 主机名，包括端口
  • hostname 主机名
  • pathname url中的路径部分
  • protocol 协议 一般是http、https
  • search 查询字符串

location对象的方法

  • location.assign() 改变浏览器地址栏的地址，并记录到历史中
  • 设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转
  • location.replace() 替换浏览器地址栏的地址，不会记录到历史中
  • location.reload() 重新加载

navigator

  • window.navigator 的一些属性可以获取客户端的一些信息
  • userAgent (系统，浏览器)
  • platform (浏览器支持的系统，win/mac/linux)

history

后退

  • history.back()
  • history.go(-1) 0是刷新

前进

  • history.forward()
  • history.go(1)

提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
旧版本浏览器..
history.back() 回退
history.forward() 前进

窗口

1.打开窗口
window.open(url,target,param)
参数：
url 要打开的地址
target新窗口的位置；值：_blank _self _parent(父框架)
param 新窗口的一些设置

返回值：新窗口的句柄
2.关闭窗口
window.close()
3.移动窗口

  • 新窗口.moveTo(width,height)//参数为距离左边距和右边距的位置。
  • 新窗口.moveBy(width,height)//参数为距离左边距和右边距的位置。
  • 新窗口.resizeTo(width,height) //参数为页面的宽度和页面的高度。
  • window.resizeBy(width,height)//要使窗口宽度(高度)增加的像素数。可以是正、负数值。

定时器

  • 循环执行（等待时间过去之后执行）

设置定时器：var timerId = setInterval(code,interval);//第一个参数执行的函数，第二个参数定时的时间。
清楚定时器：clearInterval(timerId);
间隔时间执行，不是特别精确
示例代码

    var sum = 0;
    var tim = setInterval(function () {
        console.log(sum);
        sum++;
        if(sum===10){
            clearInterval(tim);
        }
    },1000);
  • 定时执行（立刻执行）

设置定时器：var timerId = setTimeout(code,interval);//第一个参数执行的函数，第二个参数定时的时间。
清楚定时器：clearTimeout(timerId);

描述：当用户输入要搜索的内容的时候，程序会自动识别用户输入的内容，并且与已有的数据进行对比，如果已有数据是以用户输入的内容开头的，就会在输入内容的下方进行提示，用户点击提示语，内容会自动填入输入框，并隐藏其他提示语。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟百度搜索</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 500px;
            margin: 200px auto;
        }
        ul {
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover {
            background-color: red;
        }
        input {
            width: 400px;
        }
        button {
            width: 70px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text">
    <button>搜索</button>
</div>
</body>
</html>
<script>
    //模拟从服务器获取的资源
    var arr = ["a","ab","abc","abcd","aa","aaa"];
    //获取相关元素
    var box = document.getElementsByClassName("box")[0];
    var inp = document.getElementsByTagName("input")[0];
    //绑定事件（键盘弹起事件）
    inp.onkeyup = function () {
        var newArr = [];//创建一个新数组来存放要显示的li内容
        /**
         * 循环进行比较，数组中的内容是否以输入的内容开头
         */
        for(var i = 0;i<arr.length;i++){
            var val = this.value;
            if (arr[i].indexOf(val)===0){
                newArr.push("<li>"+arr[i]+"</li>");
            }
        }
        //把数组转换成字符串
        var str = newArr.join("");
        //判断ul是否存在
        if (box.children[2]){
            box.removeChild(box.children[2]);
        }
        //如果输入内容为空，或者没有以输入内容为空的元素就切断函数
        if (this.value.length===0||newArr.length===0){
            return;
        }
        //创建ul标签，并且加入到适当的位置
        var ul = document.createElement("ul");
        ul.innerHTML = str;
        box.appendChild(ul);
        //获取所有的li，点击li的时候，为input表单赋值，并且隐藏下面的提示
        var liArr = document.getElementsByTagName("li");
        for (var i = 0; i<liArr.length;i++){
            console.log(i);
            liArr[i].onclick = function () {
                inp.value = this.innerHTML;
                box.removeChild(box.children[2]);
            }
        }
    }

</script>

描述：当用户点击背景的时候，背景进行切换
示例代码：(图片换成自己的路径哦)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皮肤更换</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background: url("./images/1.jpg") no-repeat;
    }
    .box{
        height: 165px;
        padding-top: 35px;
        text-align: center;
        background: rgba(255,255,255,0.3);
    }
    img{
        width: 200px;
        cursor: pointer;
        margin: 0 10px;
    }
</style>
<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
        <img src="./images/5.jpg" alt="">
    </div>
</body>
</html>
<script>
    var box = document.getElementsByTagName("div")[0];
    var body = document.body;
    var imgArr = box.children;
    for (var i = 0;imgArr.length;i++){
        imgArr[i].index = i;
        imgArr[i].onclick = function () {
            body.style.backgroundImage = "url("+this.src+")";
        }
    }
</script>

描述：通过javascript控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。并且封装好了函数，适用于网页中所有的表格。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级隔行变色</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .form{
            width: 500px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #404060;
            width: 500px;
            text-align: center;
        }
        th,td{
            border: 1px solid #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="form">
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody class="target">
                <tr>
                    <td>001</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>赵武</td>
                    <td>100</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    var tbody = document.getElementsByClassName("target");
    for(var i = 0;i<tbody.length;i++){
        changeColor(tbody[i]);
    }
    function changeColor(ele) {
        var trArr = ele.children;

        for (var i = 0;i<trArr.length;i++){
            if(i%2!==0){
                trArr[i].style.background = "#a3a3a3";
            }else{
                trArr[i].style.background = "#ccc";
            }
            var color = "";
            trArr[i].onmouseover = function () {
                color = this.style.background;
                this.style.background = "#fff";
            }
            trArr[i].onmouseout = function () {
                this.style.background = color;
            }
        }
    }

</script>

描述：当点击链接的时候，自己的标签的背景色进行更换，其他标签进行还原。
效果图：
dh.jpg
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏的练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #list li{
            list-style: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background: #a2a5ff;
            text-align: center;
            float: left;
            margin-left: 5px;
        }
        #list li.current {
            background-color: burlywood;
        }
        #list li a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul id="list">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="javascript:void(0)">论坛</a></li>
            <li><a href="javascript:void(0)">博客</a></li>
            <li><a href="javascript:void(0)">关于</a></li>
            <li><a href="javascript:void(0)">留言</a></li>
            <li><a href="javascript:void(0)">帮助</a></li>
            <li><a href="javascript:void(0)">友链</a></li>
        </ul>
    </div>
</body>
</html>
<script>
    //方式1，排他思想
    var ul = document.getElementById("list");
    var  liArr = ul.children;
    for (var i = 0;i<liArr.length;i++){
        var a = liArr[i].firstElementChild || liArr[i].firstChild;
        a.onclick = function () {
            for (var j = 0; j<liArr.length;j++){
                liArr[j].className = "";
            }
            this.parentNode.className = "current";
        }
    }
    //方式2
 /*   var ul = document.getElementById("list");
    var aArr = ul.getElementsByTagName("a");
    for (var i = 0;i<aArr.length;i++){
        aArr[i].onclick = function () {
            this.parentNode.className = "current";
            var otherArr = getAllSiblings(this.parentNode);
            for (var j = 0;j<otherArr.length;j++){
                otherArr[j].className = "";
            }
        }
    }

    /!**
     * 获取自己的兄弟节点，并且返回一个数组
     * @param ele 元素节点
     * @returns {Array} 返回
     *!/
    function getAllSiblings(ele){
        var newArr = [];
        var arr = ele.parentNode.children;
        for(var i=0;i<arr.length;i++){
            if(arr[i]!==ele){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }*/
</script>

style属性设置和获取

语法：style.属性="属性值";
注意：
1.样式少的时候使用；
2.style是对象；
3.值是字符串，没有设置值是“”；
4.命名规则，驼峰命名。和css不一样；
5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）；
6.box.style.cssText = “字符串形式的样式”；
7.style是一个对象，不能获取内嵌和外链。

获取元素样式兼容写法

        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }

案例：
描述：鼠标经过的的时候，盒子的大小和透明度发生改变
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: pink;"></div>
<script>

    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function () {
        div.style.width = "200px";
        div.style.height = "200px";
        div.style.backgroundColor = "black";
        div.style.opacity = "0.2";
        div.style.filter = "alpha(opacity=20)";
    }

</script>

</body>
</html>
  1. 1
  2. 2
  3. 3
  4. 4