Python学习笔记第十五周 - 爱python的小皮

公告

Python学习笔记第十五周

目录：

　　一、CSS补充

　　　　1、position

　　　　2、overflow

　　　　3、hover

　　　　4、background

　　二、JavaScript

　　三、DOM

主要内容：

　　一、CSS补充　　

　　1、position

　　可以定义元素锚定到哪个位置

　　1、fixed固定在窗口的某个位置

　　例子：

　　将网页分为上下两部分，其中头部占据页面上方，内容部分可以滑动，但是头部不会被覆盖

 1 <style>
 2         .pg-header{
 3             height:48px;
 4             background-color: black;
 5             color:#dddddd;
 6             position: fixed;
 7             top:0;
 8             right:0;
 9             left:0;
10 
11         }
12 
13         .pg-body{
14             background-color: #dddddd;
15             height: 5000px;
16             margin-top:48px;
17         }
18     </style>
19 </head>
20 <body>b
21     <div class="pg-header">头部</div>
22     <div class="pg-body">内容</div>
23 </body>

　　2、absolute 绝对定位，需要和relative一起使用

　　将absolute嵌套在relatvie中，实现某一特定位置的绝对定位

 1 <body>
 2     <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
 3         <div style="position: absolute;left:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
 4     </div>
 5     <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
 6         <div style="position: absolute;right:0;bottom: 0; width:50px;height: 50px;background-color:black"></div>
 7     </div>
 8     <div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto">
 9         <div style="position: absolute;right:0;top: 0; width:50px;height: 50px;background-color:black"></div>
10     </div>
11

　　3、opacity：取值0~1，0表示全透明，1表示完全遮住

　　例子：页面三层分层

1 <body>
2     <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color: white;height:400px;width:500px">
3         <input type="text" />
4     </div>
5     <div style="z-index: 9;position:fixed;top:0;bottom: 0;right:0;left:0;opacity: 0.5;background-color:black"></div>
6     <div style="height: 5000px;background-color:green">abc</div>
7 </body>

　　2. overflow

　　overflow包含两个属性：

　　1、hidden：超出的部分隐藏

　　2、auto：超出的部分出现滚动条

　　例子：定义div标签，同时在该标签内定义一个超出标签范围的图片，查看该效果。

　　（1）超出部分隐藏

1 <div style="height:200px;width:200px;overflow: hidden;">
2         <img src="a.jpg"/>
3     </div>

　　(2) 超出部分变为滚动条

 <div style="height:200px;width:200px;overflow:auto ">
        <img src="a.jpg"/>
    </div>

　　3、hover

　　当鼠标移动某一个元素下，应用该元素另外定义的一个CSS属性中，使用hover元素

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .pg-header{
 6             position: fixed;
 7             top:0;
 8             right:0;
 9             left:0;
10             height:48px;
11             background-color:#2459a2;
12             line-height:48px;
13             color:white;
14 
15         }
16         .pg-body{
17             margin-top: 50px
18         }
19         .w{
20             width:980px;
21             margin:0 auto;
22             
23         }
24         .pg-header .menu{
25             display: inline-block;
26             padding:0 10px;
27         }
28         .pg-header .menu:hover{
29             background-color:blue;
30         }
31 
32     </style>
33 </head>
34 <body>
35     <div class="pg-header">
36         <div class="w">
37             <a class="menu">LOGO</a>
38             <a class="menu">最新发布</a>
39             <a class="menu">人类</a>
40             <a class="menu">24区</a>
41             <a class="menu">段子</a>
42         </div>
43     </div>
44     <div class="pg-body">
45         <div class="w"></div>
46     </div>
47 </body>

View Code

　　4、background

　　background分为几种不同的属性：

　　1、background-color：定义背景颜色

　　2、background-image：url（image位置加名字）定义背景图片

　　3、background-repeat：repeat-x|repeat-y|no-repeate哪个位置重复

　　4、background-position：背景图片的位置定义可以但是使用background-position-x和background-postion-y分别定义

　　5、background：背景颜色 iamge 哪个位置重复 x轴位置 y轴位置 background可以一次全部定义

　　例子：

<div style="background:#dddddd url(a.jpg) no-repeat 80px 80px;height: 800px;"></div>

 1  <style>
 2         .menu{
 3             height:30px;
 4             width:200px;
 5             position: relative;
 6 
 7         }
 8         .input_w{
 9             height:30px;
10             width:190px;
11             padding-right:20px;
12         }
13     </style>
14 </head>
15 <body>
16 
17        
18             <div class="menu">
19 
20                 <input class='input_w' type="text"  name='name'  />
21                 <span style="position:absolute;left:190px;top:5px;background-image:url(i_name.jpg);background-position:3px  5px;background-repeat: no-repeat;
22                 display: inline-block;height: 30px;width:20px;"></span>
23             </div>
24             
25 
26 </body>

View Code

　　二、JavaScript

　　JS是独立的语言，浏览器具有JS解释器的功能

　　JS代码存在形式：

　　　 -head中　　　

<script type="text/javascript">
        alert('123')
    </script>

View Code

　　　　-文件　　

<script src="js路径"></script>

View Code

　　PS:JS代码块需要放置在body标签的最下方，由于html代码从上到下执行，如果head中js代码耗时严重，会导致用户长时间没法看到页面，如果放置在body代码块底部，即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已

　　注释：

　　单行注释 //

　　多行注释 /* */

　　变量：

　　js中的变量声明是一个非常容易出错的点，局部变量必须以var开头，如果未使用var，则默认表明是一个全局变量

<script type="text/javascript">
 
    // 全局变量
    name = 'seven';
 
    function func(){
        // 局部变量
        var age = 18;
 
        // 全局变量
        gender = "男"
    }
</script>

　　数据类型

　　　JS的数据类型分为原始类型和对象类型：

　　　　原始类型：

数字
字符串
布尔值

　　　　对象类型：

数组
字典

　　特别的，数字、布尔值、null、undefine、字符串是不可变的

　　注意：

　　undefined：在js中，如果声明了某个变量，而该变量未赋值，则该变量类型为UNDEFINED，值为undefined，undefined是系统为这种情况自动定义的

　　null：是为一个对象占位，后面用到该对象再重新为该对象赋值，是开发者自己赋值的例如 var obj = null 先占位，等用到再赋值 obj = new Animal（）　　

// null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。

View Code

　　数字：

　　JS中数字不区分整数和浮点数，JS中所有数字均用浮点数表示

　　转换：

　　parseInt（）将某值转成数字，不成功则NaN

　　parseFloat（）将某值转为浮点数，不成功则NaN

　　特殊值：

　　NaN，非数字，可使用isNaN（num）来判断, NaN和一切比较都是false，除非不等于！=为true

　　Infinity 无穷大，可使用isFinite（num）来判断

　　更多数值计算：

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

View Code

　　字符串：

　　字符串是由字符组成的数组，但是在JS中字符串是不可变的，可以访问字符串任意位置的文本但是JS并未提供修改已知字符串内容的方法

　　常用功能：

obj.length                           长度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

View Code

　　备注：

　　obj.splice():第一个值是要执行动作的初始索引，第二个值从该索引开始要删除几个，第三个参数为添加的内容

　　例子：

　　a = [11,22,33]

　　a.splice(1,1,99) 表示删除索引1后面一个，再在该位置添加99

　　a.splice(1,0,909) 表示插入一个值

　　a.splice(1,1) 表示删除一个值

　　join方法：

　　a.join('_')
　　"11_99_33"

　　布尔类型：

　　布尔类型仅包含真假，与python不同的是其首字母小写

== 比较数值相等，不管类型
！= 数值不等不管类型
=== 比较数值与类型相等
！=== 数值与类型都不相等
|| 或
&& 且

　　数组：

　　JS中数组类似于python中的列表

　　常见功能：

obj.length          数组的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

View Code

　　JS条件语句

　　JS中支持两个条件语句，分别是if和switch

 if(条件){
 
    }else if(条件){
         
    }else{
 
    }

switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

switch

　　JS循环语句

　　JS中支持三种不同的循环语句，分别是：

var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

方式一

var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

方式二

while(条件){
    // break;
    // continue;
}

方式三

　　arguments函数：

　　arguments可以将传入的函数值放入一个列表中，通过索引可以将调入的值取出

function func1(){
    console.log(arguments.length)
}

func1(1,2,3,4,5)
可以直接取出该值为5，表示长度为5

function func2(){
    if(arguments.length !== 3){
              throw new Error('the parm should be 3')
}
}

//如果参数不等于3，就报错，不必函数中定义形参
func2(1,2,3,4,5)

View Code

　　函数：

　　1、基本函数

　　JS中函数基本上可以分为以下三类：

// 普通函数
    function func(arg){
        return true;
    }
          
// 匿名函数
    var func = function(arg){
        return "tony";
    }
  
// 自执行函数
    (function(arg){
        console.log(arg);
    })('123')

注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。

　　异常处理：

try{
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码结束           
}
catch（e）{
    
     //如果try代码块汇总抛出异常，catch代码块中代码就会被执行
   // e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally{
  //无论try代码是否有异常抛出，甚至try代码块中有return语句，finally代码块始终会被执行
}
//注：主动抛出异常throw Error（‘XXXXXX’）

　　三、DOM

　　文档对象类型（Document Object Model， DOM）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式，我们最为关心的是，DOM把网页和脚本以及其他编程语言联系起来，DOM属于浏览器，而不是JS语言的规范的规定的核心内容。

　　1、查找元素

　　直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

　　间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

　　2、操作

　　内容：

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

　　属性：

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选"  onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反选" onclick="ReverseCheck();"/>

    <table border="1" >
        <thead>

        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = true;
                }
            }
        }

        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }

        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }

    </script>
</body>
</html>

　　3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

　　备注：

　　tag = document.getElementById('i2')

　　tag.className = 'c2'

　　tag.classList #查看该tag下class的列表

　　tag.classList.add('c1') #添加一个新的class

　　tag.classList.remove('c3') #删除一个class

　　onclick：表示点击

　　4、标签操作

　　a、创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "gavin"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/gavin"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/gavin'>gavini</a>"

　　b、操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

　　5、样式操作

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />

    <script>
        function Focus(ths){
            ths.style.color = "black";
            if(ths.value == '请输入关键字' || ths.value.trim() == ""){

                ths.value = "";
            }
        }

        function Blur(ths){
            if(ths.value.trim() == ""){
                ths.value = '请输入关键字';
                ths.style.color = 'gray';
            }else{
                ths.style.color = "black";
            }
        }
    </script>

View Code

　　6、位置操作

总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop
 
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="margin: 0;">
    <div style="height: 900px;">

    </div>
    <div style="padding: 10px;">
        <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
                <p>asdf</p>
        </div>
    </div>

    <script>
        var i1 = document.getElementById('i1');

        console.log(i1.clientHeight); // 可见区域：height + padding
        console.log(i1.clientTop);    // border高度
        console.log('=====');
        console.log(i1.offsetHeight); // 可见区域：height + padding + border
        console.log(i1.offsetTop);    // 上级定位标签的高度
        console.log('=====');
        console.log(i1.scrollHeight);   //全文高：height + padding
        console.log(i1.scrollTop);      // 滚动高度
        console.log('=====');

    </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
        </div>
        <div class="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

        }
    </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    h1{
        padding: 0;
        margin: 0;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
        border: 1px solid red;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog" id="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
        </div>
        <div class="content" id="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

            var content = document.getElementById('content');
            var sections = content.children;
            for(var i=0;i<sections.length;i++){
                var current_section = sections[i];

                // 当前标签距离顶部绝对高度
                var scOffTop = current_section.offsetTop + 60;

                // 当前标签距离顶部，相对高度
                var offTop = scOffTop - bodyScrollTop;

                // 当前标签高度
                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){
                    // 当前标签添加active
                    // 其他移除 active
                    var menus = document.getElementById('catalog').children;
                    var current_menu = menus[i];
                    current_menu.classList.add('active');
                    for(var j=0;j<menus.length;j++){
                        if(menus[j] == current_menu){

                        }else{
                            menus[j].classList.remove('active');
                        }
                    }
                    break;
                }

            }


        }
    </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>

    body{
        margin: 0px;
    }
    img {
        border: 0;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    h1{
        padding: 0;
        margin: 0;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .wrap{
        width: 980px;
        margin: 0 auto;
    }

    .pg-header{
        background-color: #303a40;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
    }
    .pg-header .logo{
        float: left;
        padding:5px 10px 5px 0px;
    }
    .pg-header .logo img{
        vertical-align: middle;
        width: 110px;
        height: 40px;

    }
    .pg-header .nav{
        line-height: 50px;
    }
    .pg-header .nav ul li{
        float: left;
    }
    .pg-header .nav ul li a{
        display: block;
        color: #ccc;
        padding: 0 20px;
        text-decoration: none;
        font-size: 14px;
    }
    .pg-header .nav ul li a:hover{
        color: #fff;
        background-color: #425a66;
    }
    .pg-body{

    }
    .pg-body .catalog{
        position: absolute;
        top:60px;
        width: 200px;
        background-color: #fafafa;
        bottom: 0px;
    }
    .pg-body .catalog.fixed{
        position: fixed;
        top:10px;
    }

    .pg-body .catalog .catalog-item.active{
        color: #fff;
        background-color: #425a66;
    }

    .pg-body .content{
        position: absolute;
        top:60px;
        width: 700px;
        margin-left: 210px;
        background-color: #fafafa;
        overflow: auto;
    }
    .pg-body .content .section{
        height: 500px;
        border: 1px solid red;
    }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
    <div class="wrap clearfix">
        <div class="logo">
            <a href="#">
                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a  href="#">首页</a>
                </li>
                <li>
                    <a  href="#">功能一</a>
                </li>
                <li>
                    <a  href="#">功能二</a>
                </li>
            </ul>
        </div>

    </div>
</div>
<div class="pg-body">
    <div class="wrap">
        <div class="catalog" id="catalog">
            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
        </div>
        <div class="content" id="content">
            <div menu="function1" class="section">
                <h1>第一章</h1>
            </div>
            <div menu="function2" class="section">
                <h1>第二章</h1>
            </div>
            <div menu="function3" class="section" style="height: 200px;">
                <h1>第三章</h1>
            </div>
        </div>
    </div>

</div>
    <script>
        function ScrollEvent(){
            var bodyScrollTop = document.body.scrollTop;
            if(bodyScrollTop>50){
                document.getElementsByClassName('catalog')[0].classList.add('fixed');
            }else{
                document.getElementsByClassName('catalog')[0].classList.remove('fixed');
            }

            var content = document.getElementById('content');
            var sections = content.children;
            for(var i=0;i<sections.length;i++){
                var current_section = sections[i];

                // 当前标签距离顶部绝对高度
                var scOffTop = current_section.offsetTop + 60;

                // 当前标签距离顶部，相对高度
                var offTop = scOffTop - bodyScrollTop;

                // 当前标签高度
                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){
                    // 当前标签添加active
                    // 其他移除 active

                    // 如果已经到底部，现实第三个菜单
                    // 文档高度 ＝ 滚动高度 + 视口高度

                    var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
                    var b = bodyScrollTop + document.documentElement.clientHeight;
                    console.log(a+60,b);
                    if(a == b){
                        var menus = document.getElementById('catalog').children;
                        var current_menu = document.getElementById('catalog').lastElementChild;
                        current_menu.classList.add('active');
                        for(var j=0;j<menus.length;j++){
                            if(menus[j] == current_menu){

                            }else{
                                menus[j].classList.remove('active');
                            }
                        }
                    }else{
                        var menus = document.getElementById('catalog').children;
                        var current_menu = menus[i];
                        current_menu.classList.add('active');
                        for(var j=0;j<menus.length;j++){
                            if(menus[j] == current_menu){

                            }else{
                                menus[j].classList.remove('active');
                            }
                        }
                    }




                    break;
                }

            }


        }
    </script>
</body>
</html>

View Code

　　7、提交表单

document.geElementById('form').submit()

　　8、其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

posted on 2017-05-27 17:15 爱python的小皮阅读(241) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部