javascript

一 javaScript是什么

javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。

javaScript的特点：

• javaScript主要用来向html页面中添加交互行为
• javaScript是一种脚本语言，语法和c语言系列语言的语法类似，属弱语言类型。
• javaScript一般用来编写客户端脚本，如node.js例外。
• javaScript是一种解释型语言，边执行边解释无需另外编译。

二 js中的变量

变量的声明和定义

1 先声明后定义

var dog;
// alert(dog)   // undefined未定义
// 定义
 dog = '小黄'    

2 声明立即定义

var dog_2 = '小红';
console.log(dog_2);

变量命名规范：

• 严格区分大小写
• 命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。关键字：var number等
• 推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写
• 匈牙利命名：就是根据数据类型单词的的首字符作为前缀

三 js中的数据类型

 1 基本数据类型

(1) number
var a = 123; 
//typeof 检查当前变量是什么数据类型
console.log(typeof a)
// 特殊情况
var a1 = 5/0;
console.log(typeof a1) // infinity 无限大
(2) string
var str = '123';
console.log(typeof str)

(3) boolean
var b1 = false;
console.log(typeof b1)

(4) null
var c1 = null; //空对象 objec
console.log(c1)

(5) undefined
var d1;
// 表示变量

2 引用数据类型

数组Array

(1)数组的创建方式
    var colors = ['red','green','yellow']
    使用构造函数创建数组
    var colors2 = new Array()
(2)数组的赋值
    var arr = [];
    arr[0] = 123;
    arr[1] = '哈哈’
(3) 数组的常用方法
    concat()             将几个数组合并为一个数组
    join()               返回字符串，其中包含了连接到一起数组中的所有元素，元素由指定分隔符分割开来
    pop()                移除数组的最后一个元素并返回该元素
    shift()              移除数组的一个元素
    unshift()            移除数组的开头添加一个元素，并返回新的长度
    splice(star,end)     删除元素，或者向数组添加新元素(插入，需添加第三个参赛为想要添加的内容)。
        names.splice(0, 2)             # 删除前两个元素
        names.splice(1,0, "harry")  # 插入新的元素
    slice()                 可从已有的数组中返回选定的元素。
    reverse()             对数组进行反转
    length                 获取数组长度
    toString()             将数组转为字符串
    sort()                 排序,升序或者降序，默认会按照ASSIC码排序
    indexOf()             查找数组元素位置
    lasetIndexOf()        查找数据元素位置从后往前查找
    filter()              过滤数组中某些元素
        var filterResult = numbers.filter(function(item, index, array){
            return item > 10
        })
    map()                 可以操作数组中的每一项元素
        var filterResult = numbers.filter(function(item, index, array){
            return item * 2
        })

 字符串String

字符串常用方法
    charAt()            返回指定索引的位置字符
    concat()            返回字符串值，表示两个或多个字符串的拼接
    mantch()            返回正则表达式模式对字符串进行匹配到的结果
    replace(a,b)        字符串b替换成了a
    search(stringObj)   返回的第一个匹配结果的索引值
    slice(start,end)    返回start到end-1之间的字符串，索引从0开始
    substr(start,end)   字符串截取，左闭右开
    toUpperCase()       将字符串转成大写
    toLowerCase()       将字符串转成小写
    indexOf()           查找字符的索引位置
    trim()              清楚字符串的前后空格

Date日期对象

创建方法
    var myDate = new Date();
常用方法
    getDate()                根据本地时间返回指定日期对象的月份中的几(1-31)
    Date()                   根据本地时间返回当天的日期和时间
    getMonth()               根据本地时间返回指定日期对象的月份(0-11)
    getFullYear()            根据本地时间返回指定日期对象年份(四位数年份返回四位数字)
    getDay()                 根据本地时间返回指定日期对象的星期中的第几天(0-6)
    getHours()               根据本地时间返回指定日期对象的小时(0-23)
    getMinutes()             根据本地时间返回指定日期的对象分钟(0-59)
    getSeconds()             根据本地时间返回指定日期对象的秒数(0-59)
日期格式化
    toDateString()            星期 月 日 年
    toTimeString()            时 分 秒 时区
    toLoacleDateSting()
    toLocaleTimeString()
    toLocaleSting()

自定制返回数字时钟格式的时间
    function nowNumberTime(){
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        
        var temp = ""+(hour>12?hour - 12 : hour)
        if(hour === 0 ){
            temp = '12';
        }
        temp = temp + (minute <10 ? ':0': ":")+minute
        temp = temp + (second <10 ? ':0': ":")+second
        temp = temp + (hour>=12? ' P.M.':" A.M.");
        return temp;
    }

Math对象

Math.floor()            向下取整，称为地板函数
Math.cel()                向上取整
Math.max(a,b)            求a和b中的最大值
Math.min(a,b)            求a和b中的最小值
Manth.random()            随机数，默认0-1之间的随机数，公式min+Math.random()*(max-min),求min~max之间的数
    # 获取随机颜色 RGB(0-255, 0-255, 0-255);
    function randomColor(){
        var r = random(0, 256),g = random(0, 256),b = random(0, 256);
        var result = 'rgb(${r}, ${g}, ${b})';
        return result;
    }
    document.body.style.backgroundColor = rc;
    
    # 随机验证码
    function creatCode(){
        // 设置默认的空的字符串
        var code = '';
        // 设置长度
        var codeLength=4
        var rando = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
        "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
        for(var i=0; i<codeLength; i++){
            // 设置随机范围 0~36
            var index = random(0, 36);
            code = randomCode[index]
        }
    }

 四 定时器

在js中的定时器分两种：1、setTimeout() 2、setInterval()

 1.setTimeOut()

只在指定时间后执行一次
//定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器

2.setInterval()

在指定时间为周期循环执行
//实时刷新时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
  console.log('每8秒调一次') 
}
两种方法根据不同的场景和业务需求择而取之，
一般情况下setTimeout用于延迟执行某方法或功能，
setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。

五 DOM操作

在JS中，所有的事物都是节点，元素、文本等都是节点。
应用场景：可以通过节点进行DOM对象的增删改查

1 获取DOM节点的方法

//通过id获取，唯一的
var oDiv = document.getElementById('box');
//通过类名获取
var oDiv = document.getElementsByClassName('.box')[0];
//通过标签名获取
var oDiv = document.getElementsByTagName('div')[0];

2 常用DOM节点

childNodes                获取所有的子节点，除了元素还有文本等
children                  获取所有元素子节点，不包含文本
parentNode                获取父节点
previousSibling           获取上一个兄弟节点，包含文本
previousElementSibling    获取上一个兄弟元素节点，不包含文本
nextSibling               获取下一个兄弟节点，包含文本
nextElementSibling        获取下一个兄弟元素节点，不包含文本
firstChild                获取第一个子节点，包含文本
firstElementChild         获取第一个子节点，不包含文本
lastChild                 获取最后一个子节点，包含文本
lastElementChild          获取父元素最后一个元素节点。不包含文本

(1) 元素节点
    var oDiv = document.getElementById('box');
    console.log(oDiv.nodeName + "|" + oDiv.nodeValue + "|" + oDiv.nodeType);

(2) 获取属性节点
    var attrs = oDiv.attributes // 获取标签所有属性

(3) 文本节点
    var textNode = oDiv.childNodes

 3 节点的增删改查

(1) 创建节点         createElement()
(2) 插入节点         appendChild()
                    insertBefore(newNode, node) // 在一个标签前面插入
(3) 删除节点         removeChild()
(4) 替换节点         replaceChild(newNode, node)
(5) 创建文本节点      createTextNode()

// 1.创建元素节点
    var oH2 = document.createElement('h2');
// 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中
    oH2.innerHTML = '<p>嘿 sariy</p>';
// 只设置元素内的文本内容，div标签将被当做文本元素
    oH2.innerText = '<div>嘿嘿</div>'
// 2.将创建好的元素节点添加到指定元素所有内容的后面
    oDiv.appendChild(oH2);
// 获取元素节点里的所有内容 包括标签和文本
    console.log(oDiv.innerHTML);
// 表示元素节点的标签名大写
    console.log(oDiv.tagName);
// 只获取元素内的文本内容，html标签将被忽略
    console.log(oDiv.innerText);
// 设置元素id
    oH2.id = 'luffy';
// 设置类名
    oH2.className = 'wusir';
    oH2.className = 'wusir2';
//获取标签属性
    console.log(oH2.getAttribute('class'));//wusir2
// 设置标签属性
    oA.setAttribute('href','https://www.jd.com');
// 删除元素上的属性
    oA.removeAttribute('href');
// 删除创建的对象
// oDiv.removeChild(oH2);
//如果为true 克隆当前元素与元素的所有子节点
// console.log(oDiv.cloneNode(true));
// 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点
    var op = document.createElement('p');
    op.innerText = '我是一个段落';
    oDiv.replaceChild(op,oA);
//style属性 ：css内联样式属性值
//一般情况下， css的样式属性中出现“-” 号，则对应的style属性 是：去掉“-”号，把“-”号 后面单词的第一字母大写。 如果没有“-”号，则两者 一样。
//例如:oDiv.css.backgroundColor = 'red';

4 属性操作

var oP = document.getElementByTagName("p")[0];
var title = oP.getAttribute("title")            // 获取标签的title属性
var className = oP.setAttrbute("id", "haha")    // 给标签设置属性

5 样式设置

var oP = document.getElementById("box");
oP.style.backgroundColor = "black";
oP.style.color = "white";
oP.style.width = "120px";

六 BOM操作

1 什么是BOM

BOM，Browser Object Model，即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

2 BOM包含哪些内容

• document对象，即文档对象
• frames，即HTML自框架
• history，即页面的历史记录
• location，即当前页面的地址
• navigator，包含浏览器相关信息
• screen，用户显示屏幕相关属

3 window对象

window.alert()  
window.confirm() 
window.prompt()

4 location对象

location.host           返回服务器域名和端口号
location.hostname        获取服务器域名
location.pathname        获取路径
location.port            获取端口号
location.protocol        获取http或https
location.href           跳转网址
location.reload            重载网址
location.search            获取url中的参数
    # 访问每个查询字符串参数
    // 1. 取得查询字符串
    var qs = location.search.length > 0 ? location.search.substring(1):'';
    // 2. 取得每一项存放到数组中
    var items = qs.length ? qs.split("&"):[];
    var item = null, name = null, value = null;
    for(var i=0; i<items.length; i++){
        item = items[i].split("=");// ['name', 'cs'];
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length){
            args[name] = value;
        }
    }

七 JS特效案例

图片切换：

<body>
    <img src="image/name1.png" id="photo" width="200" height="200">
    <br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script>
        // 1. 获取事件源。 需要的标签
        var photo = document.getElementById("photo");
        var nextbtn = document.getElementById("next");
        var pervbtn = document.getElementById("prev");

        var minIndex = 1, maxIndex = 3, currentIndex = minIndex;
        // 2. 监听按钮的点击
        nextbtn.onclick = function () {
            if(currentIndex === maxIndex){
                currentIndex= minIndex
            }else {
                currentIndex++
            }

            photo.setAttribute("src", `image/name${currentIndex}.png`)
        }
    </script>
</body>

 显示和隐藏：

<body>
    <button id="btn">隐藏</button>
    <br>
    <img src="image/name1.png" id="new">
    <script>
        var obtn = document.getElementById("btn");
        var newImg = document.getElementsByTagName('img')[0];
        var isShow = true;

        obtn.onclick = function () {
            if(isShow){
                newImg.style.display="none";
                obtn.innerHTML = "显示";
                isShow = false;
            }else {
                newImg.style.display="block";
                obtn.innerHTML = "隐藏";
                isShow = true;
            }
        }
    </script>
</body>

衣服相册(实现鼠标悬浮切换大图)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul{
            list-style: none;
            overflow: hidden;
        }

        ul li{
            float: left;
            margin-left: 10px;
            width: 50px;
            height: 50px;
            margin-top: 20px;
        }
        .active{
            border: red solid;
        }
    </style>
</head>
<body>
<img src="image/name1.png" id="bigImg">
<ul>
    <li>
        <a>
            <img src="image/name1.png" width="46" class="smallImg">
        </a>
    </li>

    <li>
        <a>
            <img src="image/name2.png" width="46" class="smallImg">
        </a>
    </li>

    <li>
        <a>
            <img src="image/name3.png" width="46" class="smallImg">
        </a>
    </li>

    <li>
        <a>
            <img src="image/name4.png" width="46" class="smallImg">
        </a>
    </li>
</ul>
</body>
<script>
    var bigImg = document.getElementById("bigImg");
    var smallImgs = document.getElementsByClassName("smallImg");
    for(var i=0; i<smallImgs.length; i++){
        // 遍历集合, 给每个img添加事件
        smallImgs[i].onmouseover = function () {
            // 在悬浮到每个li标签之前, 先把所有的li标签的类名都置为空值
            for (var j=0; j<smallImgs.length; j++){
                smallImgs[j].parentNode.parentNode.setAttribute("class", '')
            }
            // 修改大图的src属性值
            var smallImgSrc = this.getAttribute("src");

            bigImg.setAttribute('src', smallImgSrc);
            // 给鼠标悬浮的img标签的父标签添加类名
            this.parentNode.parentNode.setAttribute('class', 'active');

        }
    }
</script>
</html>

关闭小广告效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #qe_code{
            width: 180px;
            height: 160px;
            position: relative;
            margin: 100px auto;
        }
        #qe_code img{
            position: absolute;
            right: 0;
        }
        #qe_code #close{
            position: absolute;
            width: 18px;
            height: 18px;
            border: 1px solid #e0e0e0;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="qe_code">
        <img src="image/name1.png">
        <span id="close">X</span>
    </div>
    <script type="text/javascript">
        var closeSpan = document.getElementById("close");
        var qe_code = document.getElementById("qe_code");
        closeSpan.onclick = function () {
            qe_code.style.display = 'none';
        }
    </script>
</body>
</html>

图片切换效果2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 430px;
            background: url("image/healthy.png") no-repeat;
        }
        #box ul li{
            display: inline-block;
            margin-right: 15px;
        }
        #box ul li img{
            width: 50px;
            height: 50px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="item" id="0">
                <img src="image/name1.png">
            </li>
            <li class="item" id="1">
                <img src="image/name2.png">
            </li>
            <li class="item" id="3">
                <img src="image/name3.png">
            </li>
            <li class="item" id="4">
                <img src="image/name4.png">
            </li>
        </ul>
    </div>
    <script >
        //和获取事件源
        function $(id) {
            return typeof id === 'string'? document.getElementById(id):null;
        }
        var items = document.getElementsByClassName('item');
        for(var i=0; items.length; i++){
            var item = items[i];
            item.index = i+1;
            items[i].onmouseover = function () {
                $('box').style.background = `url("image/healthy${this.index}.png") no-repeat`
            }
        }

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

更换皮肤功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #skin{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("image/healthy.png");
            background-position: center 0;
            background-repeat: no-repeat;
        }

        #skin-photo{
            width: 100%;
            height: 100px;
            position: relative;
            z-index: 10;
        }
        #skin-photo ul{
            overflow: hidden;
            width: 1200px;
            margin: 0 auto;
            background-color: rgba(255,255,255,.5);
        }

        #skin-photo ul li{
            float: left;
            cursor: pointer;
            height: 120px;
            margin: 10px 0 10px 96px;
        }
        #skin-photo ul li img{
            width: 180px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div id="skin"></div>
    <div id="skin-photo">
        <ul>
            <li>
                <img src="image/name1.png">
            </li>
             <li>
                <img src="image/name2.png">
            </li>
            <li>
                <img src="image/name3.png">
            </li>

             <li>
                <img src="image/name4.png">
            </li>

        </ul>
    </div>
    <script>
        var skin = document.getElementById("skin");
        var allItems = document.getElementsByTagName('li');
        for (var i=0; i<allItems.length; i++){
            allItems[i].index = i+1;
            allItems[i].onclick = function () {
                skin.style.backgroundImage = `url('image/name${this.index}.png')`
            }
        }
    </script>
</body>
</html>

音乐盒实现全选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #panel{
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 400px;
            padding: 20px;
            margin: 100px auto;
        }
        .panel-footer{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="panel">
            <div class="panel-title">
                <h3>千千音乐盒</h3>
                <hr>
            </div>
            <div class="panel-content">
                <input type="checkbox">漂洋过海来看你 <br>
                <input type="checkbox">一眼万年<br>
                <input type="checkbox">后来 <br>
                <input type="checkbox">没那么简单 <br>
                <input type="checkbox">如果你要离去 <br>
                <input type="checkbox">恋恋风尘 <br>
                <input type="checkbox">南山南 <br>
                <input type="checkbox">涛声依旧 <br>
                <input type="checkbox">可惜不是你 <br>
            </div>
            <div class="panel-footer">
                <hr>
                <button id="allSelect">全选</button>
                <button id="cancelSelect">取消选中</button>
                <button id="reverseSelect">反选</button>
            </div>
     </div>
     <script type="text/javascript">
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
        // 1.获取所有的复选框
        var inputs = document.getElementsByTagName('input');
        // 2.全选
        $('allSelect').onclick = function(){
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].checked = true;
            }
        }
        // 3.取消选中
        $('cancelSelect').onclick = function(){
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].checked = false;
            }
        }

        // 4.反选
        $('reverseSelect').onclick = function(){
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].checked  =  !inputs[i].checked;
                /*
                if(inputs[i].checked){
                    inputs[i].checked = false;
                }else{
                    inputs[i].checked = true;
                }
                */
            }
        }
     </script>
</body>
</html>

 表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10 表单验证</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #prompt{
            font-size: 12px;
            color: darkgray;
        }
        #score{
            border: 1px solid darkgray;
        }
        .right{
            background: url('images/right.png') no-repeat 5px center;
            background-size: 15px 15px;
            padding-left: 20px;
            color: lightgreen !important;
        }
        .error{
            background: url('images/error.png') no-repeat 5px center;
            background-size: 15px 15px;
            padding-left: 20px;
            color: red !important;
        }


    </style>
</head>
<body>
    <div id="box">
        <label for='score'>您的成绩：</label>
        <input type="text" placeholder="请输入分数" id="score">
        <span id="prompt">请输入您的成绩</span>
    </div>
    <script type="text/javascript">
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
        // input输入框失去焦点
        $('score').onblur = function(){
            // 1.获取输入的内容
            var value = parseFloat(this.value);
            console.log(typeof value);
            // 2.验证
            console.log(isNaN(value));
            if(isNaN(value)){
                //不是一个数
                $('prompt').innerHTML = '输入的成绩不正确';
                // $('prompt').setAttribute('class', 'error');
                $('prompt').className = 'error';
                this.style.borderColor = 'red';
            }else if(value >= 0 && value <= 100){
                // 合法的
                $('prompt').innerHTML = '输入的成绩正确';
                $('prompt').className = 'right';
                this.style.borderColor = 'lightgreen';
            }else{
                // 超出成绩的范围
                $('prompt').innerHTML = '成绩必须在0~100之间';
                $('prompt').className = 'error';
                this.style.borderColor = 'red';
            }
        }

        // input输入框获取焦点 恢复原来的状态
        $('score').onfocus = function(){
            $('prompt').innerHTML = '请输入您的成绩';
            $('prompt').className  = '';
            $('score').style.borderColor = 'darkgray';
            $('score').style.outline = 'none';
            $('score').value = '';

        }

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

随机验证码校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12 随机验证码</title>
    <style type="text/css">
        #code{
            width: 100px;
            height: 100px;
            background-color: #ddd;
            padding: 10px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
            color: red;
            font-weight: bold;
        }
        input{
            outline: none;

        }
    </style>
</head>
<body>

    <div id="code"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="验证">

    <script type="text/javascript">

        window.onload = function(){
            // 保存全局，与新输入的验证码进行校验
            var  code;
            // 1.获取对应的标签
            var codeDiv = document.getElementById('code');
            var newCodeInput = document.getElementById('newCode');
            var validate = document.getElementById('validate');
            // 加载页面获取对应的验证码
            creatCode()

            // 1.获取min到max之间的整数 (1~100)
            function random(max,min){
                return Math.floor(Math.random() * (max-min) + min);
            }
            function creatCode(){
                // 设置默认的空的字符串  
                 code = '';
                // 设置长度 
                var codeLength = 4;
                var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
                for(var i  = 0; i < codeLength; i++){
                    // 设置随机范围 0~36
                    var index = random(0,36);
                    code +=  randomCode[index];
                }
                codeDiv.innerHTML = code;
            }

            // 验证按钮校验
            validate.onclick = function(){
                // 获取用户新输入的验证码
                var  newCode = newCodeInput.value.toUpperCase();
                if(newCode === code){
                    // 验证成功 跳转对应的网址
                    window.location.href = 'https://www.apeland.cn';
                }else{
                    // 验证失败
                    alert('验证码不正确,请重新输入');
                    // 输入框置空
                    newCodeInput.value = ' ';
                    // 重新获取验证码
                    creatCode();
                }
            }
        }
    </script>
</body>
</html>

发布评论：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 1000px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 20px;
        }
        #comment{
            width: 80%;
            padding: 10px 10px;
            font-size: 20px;
            outline: none;
        }
        .box_top{
            margin-bottom: 20px;
        }
        #comment_content li{
            border-bottom: 1px dashed #cccccc;
            width: 800px;
            color: red;
            line-height: 45px;
        }
        #comment_content li a{
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box_top">
            <textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论"></textarea>
            <button id="btn">发布</button>
        </div>
        <ul id="comment_content">
            <!--<li>-->
                <!--我的内容-->
                <!--<a href="javascript:void(0);">删除</a>-->
            <!--</li>-->
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            // 1 监听按钮的点击
            $('btn').onclick = function () {
               // 1.1 获取用户输入的内容
                var content = $('comment').value;

               // 1.2 判断
                if(content.length === 0){
                    alert("请输入内容");
                    return;
                }

               // 1.3 创建li标签插入到ul中
                var newLi = document.createElement('li');
                newLi.innerHTML = `${content} <a href='javascript:void(0)'>删除</a>`;

                // $('comment_content').appendChild(newLi);
                $('comment_content').insertBefore(newLi, $('comment_content').children[0]);

                // 1.4 清楚输入框中的内容
                $('comment').value = '';
                // 1.5 删除评论
                var delBtns = document.getElementsByTagName('a');
                for(var i = 0; i < delBtns.length; i++){
                    delBtns[i].onclick = function () {
                        this.parentNode.remove()
                    }
                }
            };
            function $(id){
                return typeof id === 'string' ? document.getElementById(id) : null;
            }
        }
    </script>
</body>
</html>

九宫格布局(浮动实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14 九宫格布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            overflow: hidden;
        }
        #wrap .item{
            width: 248px;
            height: 360px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
         #wrap .item .price{
            color:#ff6700;
            font-size: 18px;
            font-weight: bold;
         }


    </style>
</head>
<body>
<div class="cols">
    <button>3列</button>
    <button>4列</button>
    <button>5列</button>
</div>
<div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_1.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">¥69</p>
         </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_2.jpg" alt="">
            </div>
            <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_3.jpg" alt="">
            </div>
            <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_4.jpg" alt="">
            </div>
            <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p>
            <p class="price">¥90</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_5.jpg" alt="">
            </div>
            <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p>
            <p class="price">¥78</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_6.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p>
            <p class="price">¥89</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_7.jpg" alt="">
            </div>
            <p class="title">春季短款小外套女2019春装春秋新款韩</p>
            <p class="price">¥100</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_8.jpg" alt="">
            </div>
            <p class="title">大码女装中长款针织衫春装胖mm显瘦</p>
            <p class="price">¥120</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_9.jpg" alt="">
            </div>
            <p class="title">春款韩版2019新款女装时尚初春两件套</p>
            <p class="price">¥107</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_10.jpg" alt="">
            </div>
            <p class="title">牛仔外套女短款2019春装新款女装韩版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_11.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p>
            <p class="price">¥56</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_12.jpg" alt="">
            </div>
            <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p>
            <p class="price">¥76</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_13.jpg" alt="">
            </div>
            <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p>
            <p class="price">¥45</p>
        </div>
</div>
<script type="text/javascript">
    // 1.获取标签
    var btns = document.getElementsByTagName('button');
    var items = document.getElementsByClassName('item');

    // 2.监听按钮的点击
    btns[0].onclick = function(){
        
        // 3.循环  
       mjj_flex(3);
    }
     btns[1].onclick = function(){
        
        mjj_flex(4)
       
    }
    btns[2].onclick = function(){
        
       mjj_flex(5);
    }

    function mjj_flex(colsNum){
         for(var i = 0; i < items.length; i++){
            items[i].style.float = 'left';
            items[i].parentNode.style.width = (colsNum * items[i].offsetWidth) + 'px'
        }
    }

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

九宫格布局(定位实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14 九宫格布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
           position: relative;
        }
        #wrap .item{
            width: 248px;
            height: 360px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
         #wrap .item .price{
            color:#ff6700;
            font-size: 18px;
            font-weight: bold;
         }


    </style>
</head>
<body>
<div class="cols">
    <button>3列</button>
    <button>4列</button>
    <button>5列</button>
</div>
<div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_1.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">¥69</p>
         </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_2.jpg" alt="">
            </div>
            <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_3.jpg" alt="">
            </div>
            <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_4.jpg" alt="">
            </div>
            <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p>
            <p class="price">¥90</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_5.jpg" alt="">
            </div>
            <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p>
            <p class="price">¥78</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_6.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p>
            <p class="price">¥89</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_7.jpg" alt="">
            </div>
            <p class="title">春季短款小外套女2019春装春秋新款韩</p>
            <p class="price">¥100</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_8.jpg" alt="">
            </div>
            <p class="title">大码女装中长款针织衫春装胖mm显瘦</p>
            <p class="price">¥120</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_9.jpg" alt="">
            </div>
            <p class="title">春款韩版2019新款女装时尚初春两件套</p>
            <p class="price">¥107</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_10.jpg" alt="">
            </div>
            <p class="title">牛仔外套女短款2019春装新款女装韩版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_11.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p>
            <p class="price">¥56</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_12.jpg" alt="">
            </div>
            <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p>
            <p class="price">¥76</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_13.jpg" alt="">
            </div>
            <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p>
            <p class="price">¥45</p>
        </div>
</div>
<script type="text/javascript">
    // 1.获取标签
    var btns = document.getElementsByTagName('button');
    var items = document.getElementsByClassName('item');

    // 2.监听按钮的点击
    btns[0].onclick = function(){
        
        // 3.循环  
       mjj_flex(3);
    }
     btns[1].onclick = function(){
        
        mjj_flex(4)
       
    }
    btns[2].onclick = function(){
        
       mjj_flex(5);
    }

    function mjj_flex(colsNum){
         // 第0行第0列   top: row * h       left: col* w
         // 第0行第1列   top: 0 * h         left: 1* w
         // 第0行第2列   top: 0 * h         left: 2* w
         // 第1行第0列   top: 1 * h         left: 0 * w
         // 第1行第1列   top: 1 * h         left: 1 * w
         // 第1行第2列   top: 1 * h         left: 2* w
         // 第2行第0列   top: 2 * h         left: 0* w
         // 第2行第1列   top: 2 * h         left: 0* w
         // 第2行第2列   top: 2 * h         left: 0* w
         for(var i = 0; i < items.length; i++){
                 // 求每个盒子占得行数和列数      10      3行  1列
                                                                     // 11     3行 2列
                 var row = parseInt(i / colsNum);
                 var col = parseInt(i % colsNum);
                 // 设置盒子定位
                  items[i].style.position = 'absolute';
                  items[i].style.top = (row * items[i].offsetHeight) + 'px';
                  items[i].style.left = (col * items[i].offsetWidth) + 'px';
         }


    }

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

数字时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19 数字时钟案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            background: url('images/clock.jpg') no-repeat;
            position: relative;
        }
        #hour,#minute,#second{
            position: absolute;
            width: 30px;
            height: 600px;
            left: 50%;
            top: 0;
            margin-left: -15px;
        }
        #hour{
            background: url('images/hour.png') no-repeat center center;
        }
        #minute{
            background: url('images/minute.png') no-repeat center center;
        }
        #second{
            background: url('images/second.png') no-repeat center center;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        // 1.获取标签
        var hour = document.getElementById('hour');
        var minute = document.getElementById('minute');
        var second = document.getElementById('second');

        // 2.开启定时器 获取当前时间
        setInterval(function () {
            // 2.1 获取当前的时间戳
            var now = new Date();
            // 2.2 获取小时 分钟 秒
            var s = now.getSeconds();
            var m = now.getMinutes() + s / 60;
            var h = now.getHours() % 12 + m / 60;
            // 2.3 旋转
            second.style.transform = `rotate(${s * 6}deg)`;
            minute.style.transform = `rotate(${m * 6}deg)`;
            hour.style.transform = `rotate(${h * 30}deg)`;

        }, 10);

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

长图滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20 长图滚动效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #000;
        }
        #box{
            width: 658px;
            height: 400px;
            border: 1px solid #ff6700;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        #box img{
            position: absolute;
            top: 0;
            left: 0;
        }
        #box span{
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }
        #box #top{
            top: 0;
        }
        #box #bottom{
            bottom: 0;
        }

    </style>
</head>
<body>
    <div id="box">
        <!-- 658 4066 -->
        <img src="images/timer.jpeg" alt="">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>
    <script type="text/javascript">
        // 1.获取标签
        var box = document.getElementById('box');
        var pic = document.getElementsByTagName('img')[0];
        var divTop = document.getElementById('top');
        var divBottom = document.getElementById('bottom');

        // 2.添加事件
        var num = 0,timer = null;
        divTop.onmouseover  = function  () {
            clearInterval(timer);
            //  让图片向上滚动
            timer = setInterval(function  () {
                 num -= 10;
                if(num >= -3666){
                    pic.style.top = num + 'px'; 
                }else{
                    clearInterval(timer);
                }
            },50);
        }
        divBottom.onmouseover  = function  () {
            clearInterval(timer);
            //  让图片向上滚动
            timer = setInterval(function  () {
                 num += 10;
                if(num <= 0){
                    pic.style.top = num + 'px'; 
                }else{
                    clearInterval(timer);
                }
            },100);
        }
        box.onmouseout = function () {
            clearInterval(timer);
        }

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