JavaScriptやDOM操作

ディレクトリ

、DOMツリー・プレゼンテーション
第二に、ノードを見つけます
第三に、ノードの操作
第四に、イベント

、DOMツリー・プレゼンテーション

DOM：ドキュメントオブジェクトモデル。DOMは、文書の構造化された表現を提供し、スクリプトの文書構造にアクセスする方法を定義します。実際に、操作の目的は、JS HTML要素及び仕様の開発を可能にすることです。

DOMでノードで構成されています：HTMLがロードされ、レンダリングエンジンは、HTML文書のメモリにあるDOMツリーを生成します。

HTMLそれらには、すべてのノード：

Elementノード：HTMLタグ
テキストノード：テキストラベル（たとえば、ラベル間のスペースとして、ラップ）
属性::ノードラベル

HTML文書全体が文書ノードです。すべてのノードが対象となります。

DOMを使用することを行うことができます。

オブジェクトを探す（要素ノード）
要素の属性値
スタイリング要素
動的要素を作成および削除
トリガイベントの応答：ドライバーのイベントソース、イベント、イベント

第二に、ノードを見つけます

直接見て

DOMノードを取得することは、実際にされたイベントソースの方法を取得します

要素ノードを操作するには、最初のノードを見つけなければなりません。あなたはDOMノードを取得することができる3つの方法があります。

<!--示例数据-->
<body>
    <div id = 'foo'>
        <div id = 'son1' class="son">
            <img src="" alt="">
        </div>
        <div id = 'son2' class="son">
            <a href="http://www.baidu.com" id="baidu">百度</a>
        </div>
    </div>
</body>

<script>
    //方式一：通过id获取单个标签
    var div_foo = document.getElementById('foo');
    //方式二：通过标签名获得标签数组
    var arr_div = document.getElementsByTagName('div');
    //方式三：通过类名获得标签数组
    var arr_son = document.getElementsByClassName('son');
    //其中方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用
</script>

第二に、間接的な探し

あなたはDOMノード間の相対的な関係によってそれらにアクセスできるようにDOMノードは、絶縁されていません。次のように：

アクセスノードとの関係、道プロパティに存在しています。

父と兄は関係のJSを訪問しました。

親ノードを取得します。

var son1 = document.getElementById('son1');
var foo = son1.parentNode;

兄弟を取得します：

次の兄弟ノード：

var son1 = document.getElementById('son1');
var son2 = son1.nextElementSibling;

兄弟の場合：

var son2 = document.getElementById('son2');
var son1 = son2.previousElementSibling;

任意の兄弟ノードを取得します。

var son1 = document.getElementById('son1');
var son = son1.parentNode.children[index];

子ノードを取得します：

単一の子要素ノードの取得：

最初の子ノードを取得します。

var foo = document.getElementById('foo');
var son1 = foo.firstElementChild;

最後の子要素ノードを取得します：

var foo = document.getElementById('foo');
var son_last = foo.lastElementChild;

すべての子要素ノードを取得します。

var foo = document.getElementById('foo');
var arr_son = foo.children;

第三に、ノードの操作

ノードアクセス関係があるプロパティ。ノードの操作がある機能（方法

ノード自体の最初の動作

ノードを作成します

新的标签(元素节点) = document.createElement("标签名");

var a = document.createElement('a');

挿入ノード

父节点.appendChild(新的子节点);//方式1：父节点的最后插入一个新的子节点
父节点.insertBefore(新的子节点,作为参考的子节点);//方式2：在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点

ノードを削除します。

父节点.removeChild(子节点);//用父节点删除子节点。必须要指定是删除哪个子节点。
node1.parentNode.removeChild(node1);//删除自己这个节点

コピーノード（ノードクローン）

节点.cloneNode()     //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上

交換用ノード

父节点.replaceChild(新标签,旧节点)

2つの操作、ノード属性

サンプルデータ：

<img src="img/timg.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

ノードのプロパティ値を取得します。

道

元素节点.属性;
元素节点[属性];

<body>
  <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">
    var myNode = document.getElementsByTagName("img")[0];
    console.log(myNode.src);
    console.log(myNode.className);    //注意，是className，不是class
    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
</script>
</body>

第二の方法：お勧めします

元素节点.getAttribute("属性名称");

console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class"));   //注意是class
console.log(myNode.getAttribute("title"));

実施の形態2と実施の形態1との違いは、前者は、ラベルとしてDOMノードで直接操作タグであります

ノードの属性値：

道

myNode.src = "images/2.jpg"   //修改src的属性值
myNode.className = "image2-box";  //修改class的name

第二の方法：推奨

 元素节点.setAttribute(属性名, 新的属性值);

myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");

ノード属性を削除します。

元素节点.removeAttribute(属性名);

myNode.removeAttribute("class");
myNode.removeAttribute("id");

第三に、テキストノードの操作

テキストノードの値を取得します：

var div = document.getElementById("d1")
div.innerText  # 获取该标签和内部所有标签的文本内容
div.innerHTML  # 获取的是该标签内的所有内容，包括文本和标签

ノードのテキスト値：

var div = document.getElementById("d1")
div.innerText="1"        # 只能设置文本
div.innerHTML="<p>2</p>" # 能识别成一个p标签

获取值操作:

标签.value--适用于以下标签，用户输入或者选择类型的标签：input 、select 、textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作:

className  获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

指定CSS操作:

obj.style.backgroundColor="red"

对于没有-的CSS属性一般直接使用style.属性名即可。如：margin


obj.style.margin
obj.style.width
obj.style.left
obj.style.position

对含有-的CSS属性，将中横线后面的第一个字母换成大写即可。如：margin-top

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

四, 事件

JS是以事件驱动为核心的一门语言,事件的三要素:

事件源: 引发后续事件的html标签
事件: JS中定义的一些列事件
事件驱动程序: 对样式和html的操作,也就是DOM

代码书写步骤:

获取事件源: 节点的查找
绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
书写事件驱动程序: 关于DOM的操作

代码举例:

</head>
<body>
    <button id="btn">点击一下</button>
</body>
<script>
    // 1. 获取事件源
    var btn = document.getElementById('btn')
    // 2. 绑定事件
    btn.onclick = function () {
        // 3. 书写事件驱动程序
        alert('点我干啥!')
    }
</script>

常见事件如下:

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单的选项发生改变
onfocus	获得焦点,表示文本框等获得鼠标光标
onblur	失去焦点,表示文本框等失去鼠标光标
onmouseover	鼠标悬停,即鼠标停留在图片等的上方
onmouseout	鼠标移出,即离开图片等所在的区域
onload	网页文档加载事件
onnuload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时
onscroll	滚动轴移动事件

获取事件源(DOM节点的获取)

一, 绑定事件的方式

直接绑定匿名函数:

</head>
<body>
    <button id="btn">点击一下</button>
</body>
<script>
    // 1. 获取事件源
    var btn = document.getElementById('btn')
    // 2. 绑定事件
    btn.onclick = function () {
        // 3. 书写事件驱动程序
        alert('点我干啥!')
    }
</script>

先单独定义函数，再绑定:

</head>
<body>
    <button id="btn">点击一下</button>
</body>
<script>
    // 1. 获取事件源
    var btn = document.getElementById('btn')
    // 2. 绑定事件
    btn.onclick = fun;  //注意没有()
    // 3. 书写事件驱动程序
    function fun() {
        alert('点我干啥!')
    }
</script>

行内绑定:

</head>
<body>
    <button id="btn" onclick="fn()">点击一下</button>
    //注意时"fn()"
</body>
<script>
    function fun() {
        alert('点我干啥!')
    }
</script>

二, 事件驱动程序

还可以操作标签的属性和样式,代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*使其变得可点击*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
    <script>
        var box = document.getElementById('box');
        box.onclick = function(){
            this.style.width = '200px';
            this.style.height = '200px';
            this.style.backgroundColor = 'red';
        }
    </script>

注意:

在JS中写属性值时,要用引号
在js里写属性名时,是backgroundColor,不是CSS里面的background-Color.所有的像css属性的text-*，line-*、backgroun-*等在js中都写成驼峰

三, 事件举例与练习

onload事件:

当页面加载（文本和图片）完毕的时候，触发onload事件

代码示例:

<script>
    window.onload = function () {
        alert('页面加载完毕!')
    }
</script>

注意: js的加载是和html同步加载的.因此,如果使用元素在定义元素之前,容易报错.这个时候,onload事件就能派上用场了,可以把使用元素的代码放在onload里,就能保证这段代码是最后执行.

建议是: 整个页面上所有元素加载完毕再执行js内容.所以,window.onload可以预防使用标签在定义标签之前

应用之--获取可视区域大小:

<script type="text/javascript">
    // 屏幕的可视区域
    window.onload = function(){

        // document.documentElement 获取的是html标签
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
        // 窗口大小发生变化时，会调用此方法
        window.onresize = function(){
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
        }
    }
</script>

应用之--offset系列:

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

    </head>
    <body style="height: 2000px">
        <div>
            <div class="wrap" style=" width: 300px;height: 300px;background-color: green">
                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById('box');
            /*
             offsetWidth占位宽  内容+padding+border
             offsetHeight占位高 内容+padding+border
             offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
             offsetLeft: 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
             */
            console.log(box.offsetTop);
            console.log(box.offsetLeft);
            console.log(box.offsetWidth);
            console.log(box.offsetHeight);

        }
    </script>
</html>

onscroll事件:

window.onscoll 在页面的滚动条滚动的时候触发的事件
document.documentElement.scrollTop

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body style="width: 2000px;height: 2000px;">
    <div style="height: 200px;background-color: red;"></div>
    <div style="height: 200px;background-color: green;"></div>
    <div style="height: 200px;background-color: yellow;"></div>
    <div style="height: 200px;background-color: blue;"></div>
    <div style="height: 200px;background-color: gray;"></div>
    <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin-top: 5px;">
        <p>我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码我是一段示例代码
        </p>
    </div>


</body>
<script type="text/javascript">

    window.onload = function(){

        //实施监听滚动事件
        window.onscroll = function(){
           console.log('上'+document.documentElement.scrollTop);
           console.log('左'+document.documentElement.scrollLeft);
           console.log('宽'+document.documentElement.scrollWidth);
           console.log('高'+document.documentElement.scrollHeight);
        };

        var s = document.getElementById('scroll');
        s.onscroll = function(){
        //scrollHeight : 内容的高度+padding  不包含边框
            console.log('text上'+s.scrollTop);
            console.log('text左'+s.scrollLeft);
            console.log('text宽'+s.scrollWidth);
            console.log('text高'+s.scrollHeight);
        }
    }

</script>
</html>

红绿灯:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红绿灯</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        .foo{
            border: solid 5px #b0b0b0;
            border-radius: 50px;
            float: left;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #b0b0b0;
            border-radius: 50px;
            float: left;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="foofoo clearfix">
        <div class="foo">
            <div class="son red"></div>
            <div class="son"></div>
            <div class="son"></div>
        </div>
    </div>
</body>
    <script>
         setInterval(fun, 2000);
         function fun(){
             var foo = document.getElementsByClassName('foo')[0];
             if (foo.children[0].classList.contains('red')){
                 foo.children[0].classList.remove('red');
                 foo.children[1].classList.add('green');
             }else if (foo.children[1].classList.contains('green')){
                 foo.children[1].classList.remove('green');
                 foo.children[2].classList.add('yellow');
             }else {
                 foo.children[2].classList.remove('yellow');
                 foo.children[0].classList.add('red');
             }
         }
    </script>
</html>

input框动态显示时间:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态显示时间</title>
</head>
<body>
    <input type="text" id="date">
    <button id="control">开始</button>
</body>
    <script>
        function update() {
            var date_s = document.getElementById('date');
            var now_time = new Date().toLocaleString();
            date_s.value = now_time;
        }
        var control = document.getElementById('control');
        control.onclick = function () {
            switch (this.innerText) {
                case '开始':
                    work = setInterval(update, 100);
                    this.innerText = '停止';
                    break;
                case '停止':
                    clearInterval(work);
                    this.innerText = '开始';
                    break;
            }
        }
    </script>
</html>

模拟广告:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟广告</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #poster{
            width: 100%;
            height: 100px;
            background-color: green;
            color: yellow;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            position: fixed;
            top: 0;
        }
        #close_poster{
            float: right;
        }
        #main{
            height: 6000px;
            width: 1266px;
            background-color: lightcoral;
            text-align: center;
            line-height: 2000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="poster">
        我是一个广告,气死你,啊哈哈!
        <button id="close_poster">X</button>
    </div>
    <div id="main">这里是正文</div>
</body>
    <script>
        var btn = document.getElementById('close_poster');
        btn.onclick = function(){
            this.parentNode.style.display = 'none';
        }
    </script>
</html>

鼠标悬停替换图片,离开时换回来:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换图片</title>
    <style>
        img{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="0.jpg" alt="" id="img">
    </div>
</body>
    <script>
        // 要养成在页面加载完成后再运行JS代码的习惯
        window.onload = function () {
            var img = document.getElementById('img');
            img.onmouseover = function () {
                this.setAttribute('src', 'timg.jpg')
            };
            img.onmouseout = function () {
                this.setAttribute('src', '0.jpg')
            }
        }
    </script>
</html>

模态框:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 100%;
            height: 100%;
            background-color: #b0b0b0;
            position: absolute;
            top: 0;
        }
        #text{
            background-color: white;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            margin-top: -150px;
            left: 50%;
            margin-left: -150px;
            color: red;
            line-height: 300px;
            text-align: center;
        }
        #close{
            background-color: red;
            float: right;
        }
    </style>
</head>
<body>
    <button id="btn">弹出模态框</button>
</body>
    <script>
        var box = document.createElement('div');
        var son = document.createElement('div');
        var close = document.createElement('button');
        box.id = 'box';
        close.id = 'close';
        son.id = 'text';
        son.innerHTML = '不关我就不让你点网页!';
        close.innerHTML = '关闭';
        son.appendChild(close);
        box.appendChild(son);

        var btn = document.getElementById('btn');
        btn.onclick = function () {
            this.parentNode.appendChild(box);
        };
        close.onclick = function () {
            box.parentNode.removeChild(box);
        }
    </script>
</html>

select框的联动效果:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select框的联动效果</title>
</head>
<body>
    <select name="province" id="province">
        <option value="0" selected>请选择省份</option>
    </select>
    <select name="city" id="city">
        <option value="0">请选择城市</option>
    </select>
</body>
    <script>
        data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
        var province = document.getElementById('province');
        for(i in data){
            var p = document.createElement('option');
            p.innerHTML = i;
            province.appendChild(p);
        }
        province.onchange = function () {
            var city = document.getElementById('city');
            city.innerText = null;
            var choice = document.createElement('option');
            choice.innerText = '请选择城市';
            city.appendChild(choice);
            var num = this.options.selectedIndex;
            var city_name = this.children[num].innerText;
            for(i in data[city_name]){
                var c = document.createElement('option');
                c.innerHTML = data[city_name][i];
                city.appendChild(c)
            }
        }
    </script>
</html>

简易留言板:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .close{
            display: inline-block;
            width: 20px;
            height: 100%;
            line-height: 20px;
            text-align: center;
            background-color: wheat;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>这是一个简易的留言板</h1>
    <div id="box"></div>
    <textarea name="text" id="text" cols="30" rows="10"></textarea>
    <input type="button" id="btn" value="留言"/>
    <button id="sum">统计</button>
</body>
    <script>
        var ul = document.createElement('ul');
        var box = document.getElementById('box');
        box.appendChild(ul);

        var btn = document.getElementById('btn');
        var msg = document.getElementById('text');

        var count = 0;
        btn.onclick = function () {
            var li = document.createElement('li');
            li.innerHTML = msg.value + '<span class="close">X</span>';
            var close = li.lastChild;
            close.onclick = function () {
                ul.removeChild(this.parentNode);
                count--;
            };
            var lis = document.getElementsByTagName('li');
            if(lis.length==0){
                ul.appendChild(li);
                count++
            }else{
                ul.insertBefore(li, lis[0]);
                count++;
            }
            msg.value = '';
        };
        var sum = document.getElementById('sum');
        sum.onclick = function () {
            alert('当前留言条数为:'+count)
        }
    </script>
</html>

使用js模拟选择器中hover代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟hover</title>
</head>
<style>
    button{
        width: 100px;
        height: 50px;
        cursor: pointer;
    }
</style>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
    var btns = document.getElementsByTagName('button');
    for(var i = 0;i < btns.length;i++){
        btns[i].onmouseover = function () {
            this.style.backgroundColor = 'red';
        };
        btns[i].onmouseout = function () {
            this.style.backgroundColor = null;
        }
    }
</script>
</html>

tab栏选项卡:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab选项卡</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .foo{
        width: 600px;
        position: relative;
        margin: 0 auto;
    }
    .son{
        display: inline-block;
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #b0b0b0;
        cursor: pointer;
    }
    .text{
        background-color: red;
        height: 400px;
        width: 600px;
        line-height: 400px;
        text-align: center;
        font-size: 40px;
        position: absolute;
        top: 100px;
        display: none;
    }
    .red{
        background-color:red;
    }
    .xianshi{
        display: block;
    }
</style>
<body>
<div class="foo">
    <div class="son" id="1">首页</div><div class="son" id="2">新闻</div><div class="son" id="3">图片</div>
    <div class="text" id="main">这里是主页的内容</div>
    <div class="text" id="new">这里是新闻的内容</div>
    <div class="text" id="jpg">这里是图片的内容</div>
</div>
</body>
<script>
    var sons = document.getElementsByClassName('son');
    var texts = document.getElementsByClassName('text');
    for(var i = 0;i < sons.length;i++){
        sons[i].onmouseover = function () {
            this.classList.add('red');
            texts[this.id - 1].classList.add('xianshi');
        };
        sons[i].onmouseout = function () {
            this.classList.remove('red');
            texts[this.id - 1].classList.remove('xianshi');
        }
    }
</script>
</html>

购物车案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .foo{
        position: relative;
        width: 200px;
        margin: 0 auto;
    }
    .shop{
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        background-color: lightgray;
    }
    .son{
        width: 500px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        position: absolute;
        top: 100px;
        right: 0;
        background-color: lightsalmon;
        display: none;
    }
    .on_shop{
        background-color: lightsalmon;
    }
    .show{
        display: block;
    }
</style>
<body>
<div class="foo">
    <div class="shop">
        我的购物车
    </div>
    <div class="son">
        这里是我的购物清单
    </div>
</div>
</body>
<script>
    var shop = document.getElementsByClassName('shop')[0];
    var son = document.getElementsByClassName('son')[0];
    shop.onmouseover = function () {
        shop.classList.add('on_shop');
        son.classList.add('show');
    };
    shop.onmouseout = function () {
        shop.classList.remove('on_shop');
        son.classList.remove('show');
    }
</script>
</html>

计时器:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
    <style>
        span{
            font-size: 30px;
        }
        .num{
            display: inline-block;
            width: 50px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background-color: lightcyan;
            border-radius: 10px;
        }
        button{
            width: 120px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div>
    <div class="num" id="hour1">0</div>
    <div class="num" id="hour0">0</div>
    <span>:</span>
    <div class="num" id="minute1">0</div>
    <div class="num" id="minute0">0</div>
    <span>:</span>
    <div class="num" id="second1">0</div>
    <div class="num" id="second0">0</div>
</div>
<button id="start">开始计时</button>
<button id="stop">暂停计时</button>
<button id="cancel">重置计时</button>
</body>
<script>
    var start = document.getElementById('start');
    var stop = document.getElementById('stop');
    var cancel = document.getElementById('cancel');
    var start_static = true;
    start.onclick = function () {
        if (start_static){
            start_static = false;
            timer = setInterval('update("second",6)', 1000);
        }
    };
    function update(hms, max) {
        var hms0 = document.getElementById(hms+0);
        var int0 = parseInt(hms0.innerText);
        int0++;
        if(int0 == 10){
            int0 = 0;
            var hms1 = document.getElementById(hms+1);
            var int1 = parseInt(hms1.innerText);
            int1++;
            if(int1 == max){
                int1 = 0;
                if(hms == 'second'){
                    update('minute', 6);
                }else if (hms == 'minute'){
                    update('hour', 10);
                }
            }
            hms1.innerText = int1;
        }
        hms0.innerText = int0;
    }
    stop.onclick = function () {
        clearInterval(timer);
        start_static = true;
    };
    cancel.onclick = function () {
        clearInterval(timer);
        var nums = document.getElementsByClassName('num');
        for(var i = 0;i < nums.length;i++){
            nums[i].innerText = 0;
            start_static = true;
        }
    }
</script>
</html>

字体随机变色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体随机变色</title>
    <style>
        span{
            font-size: 40px;
        }
    </style>
</head>
<body>
<span>看我七十二变!!!</span>
</body>
<script>
    var main = document.getElementsByTagName('span')[0];
    setInterval(show, 200);
    function show() {
        main.style.color = '#' + parseInt(Math.ceil(Math.random()*16777216 + 0.5),16);
    }
</script>
</html>