事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <style type="text/css">
            #redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="redDiv"></div>
        <form action="" id="reg">
            <input type="text" id="userName">
            <input type="submit" id="submit">
            <input type="reset" id="reset">
        </form>
    </body>
    <script type="text/javascript">
        var redDiv = document.getElementById("redDiv");
        var reg = document.getElementById("reg");
        var userName = document.getElementById("userName");
        // 鼠標事件
        redDiv.onmousemove = function(){
            console.log("鼠標移動的時候觸發");
        }
        redDiv.onclick = function(){
            console.log("單擊事件");
        }
        redDiv.ondblclick = function(){
            console.log("雙擊事件");
        }
        redDiv.onmousedown = function(){
            console.log("鼠標按下事件");
        }
        redDiv.onmouseup = function(){
            console.log("鼠標擡起事件");
        }
        redDiv.oncontextmenu = function(){
            console.log("鼠標右擊事件");

            // 阻止默認右鍵彈出右鍵欄
            return false;
        }
        // over 和 out 會在鼠標從 redDiv 的父級移到子級的時候觸發,先觸發 out 再觸發 over
        // leave 和 enter 從父級移到子級不會觸發,只有鼠標離開/移入整個 redDiv 的時候纔會觸發
        redDiv.onmouseover = function(){
            console.log("over 移入");
        }
        redDiv.onmouseout = function(){
            console.log("out 移出");
        }
        redDiv.onmouseleave = function(){
            console.log("leave 移出");
        }
        redDiv.onmouseenter = function(){
            console.log("enter 移入");
        }
        // 鍵盤事件
        document.onkeydown = function(){
            console.log("down鍵盤按下");
        }
        document.onkeypress = function(){
            console.log("press 鍵盤按下");
        }
        document.onkeyup = function(){
            console.log("鍵盤擡起事件");
        }
        // 表單
        userName.onchange = function(){
            console.log("change內容發生改變之後觸發");
        }
        userName.oninput = function(){
            console.log("input內容發生變化之後觸發");
        }
        userName.onfocus = function(){
            console.log("聚焦");
        }
        userName.onblur = function(){
            console.log("失焦");
        }
        // 給 form 表單綁定事件
        reg.onsubmit = function(){
            console.log("提交");

            // 阻止默認跳轉
            return false;
        }
        reg.onreset = function(){
            console.log("重置");

            // 阻止默認重置
            return false;
        }
        // window 事件
        window.onresize = function(){
            console.log("窗口尺寸發生變化的時候觸發");
        }
        window.onscroll = function(){
            console.log("窗口內容滾動的時候觸發");
        }
        window.onload = function(){
            console.log("窗口加載完畢之後觸發");
        }
    </script>
</html>

事件對象

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件對象</title>
        <style type="text/css">
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            p{
                margin: 0;
                height: 100px;
                margin-left: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="redDiv">
            <p></p>
        </div>
    </body>
    <script type="text/javascript">
        // 鼠標事件 -> 位置
        var redDiv = document.getElementsByClassName("redDiv")[0];
        redDiv.onclick = function(){
            var evObj = window.event || ev;
            // 觸發事件的元素(觸發事件的元素不一定是綁定事件的元素)
            console.log(evObj.target);
            // 鼠標距離窗口頂部的座標
            console.log(evObj.clientY);
            // 鼠標距離頁面頂部的座標
            console.log(evObj.pageY);
            // 鼠標距離 target 頂部的座標
            console.log(evObj.offsetY);
        }
        // press 區分大小寫,但不支持特使按鍵
        // down 不區分大小寫,支持特殊按鍵
        document.onkeypress = function(ev){
            console.log("press" + ev.keyCode);
        }
        document.onkeydown = function(ev){
            // keyCode 標識哪一個按鍵
            console.log(ev.keyCode);
            if (ev.keyCode == 66) {
                console.log("按了 B");
            }
            // 判斷組合鍵
            if (ev.keyCode == 66 && ev.metaKey) {
                console.log("按了 command + B");
            }
        }
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拖拽控制元素移動</title>
        <style type="text/css">
            .box{
                width: 1920px;
                height: 1920px;
            }
            .move{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="box"><div class="move"></div></div>

    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName("box")[0];
        var move = document.getElementsByClassName("move")[0];

        box.onmousemove = function(){
            var evObj = window.event;
            move.style.left = - 50 + evObj.pageX + "px" ;
            move.style.top = - 50 + evObj.pageY + "px";
            // console.log(evObj.pageY);
            // console.log(evObj.pageX);
            console.log(move.style.left);
            console.log(move.style.top);
        }
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .box{
                width: 1000px;
                height: 500px;
            }
            .move{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 450px;
                left: 450px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="move"></div>
        </div>
    </body>
    <script type="text/javascript">
        var move = document.getElementsByClassName("move")[0];
        document.onkeypress = function(ev){
            // console.log("press" + ev.keyCode);
            // console.log(move.style.top);
            // console.log(move.style.left);
            if (ev.keyCode == 119) {
                move.style.top = move.offsetTop - 5 + "px";
            } else if (ev.keyCode == 115) {
                move.style.top = move.offsetTop + 5 + "px";
            } else if (ev.keyCode == 97) {
                move.style.left = move.offsetLeft - 5 + "px";
            } else if (ev.keyCode == 100) {
                move.style.left = move.offsetLeft + 5 + "px";
            }
            // if (ev.keyCode == 38) {
            //  move.style.top = move.offsetTop - 5 + "px";
            // } else if (ev.keyCode == 40) {
            //  move.style.top = move.offsetTop + 5 + "px";
            // } else if (ev.keyCode == 37) {
            //  move.style.left = move.offsetLeft - 5 + "px";
            // } else if (ev.keyCode == 39) {
            //  move.style.left = move.offsetLeft + 5 + "px";
            // }
        }
    </script>
</html>

動畫

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>動畫</title>
        <style type="text/css">
            .red{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
                /*動畫名稱*/
                animation-name: run;
                /*動畫時長*/
                animation-duration: 1s;
                /*動畫運動方式*/
                animation-timing-function: linear;
                /*動畫延時*/
                /*animation-delay: 1s;*/
                /*動畫次數*/
                /*infinite 無限*/
                animation-iteration-count: 1;
                /*動畫方向*/
                /*reverse 反向*/
                /*normal 正常*/
                /*alternate 單數正向,雙數反向*/
                /*alternate-reverse 雙數正向,單數反向*/
                animation-direction: normal;
                /*
                    forwards 動畫結束的時候停留在當前位置
                    backwards 在動畫延時期間,元素的位置在動畫起始的位置
                    both 包含以上兩個效果
                */
                animation-fill-mode: both;
            }
            @keyframes run{
                0%{
                    left: 0;
                }
                50%{
                    left: 50px;
                }
                100%{
                    left: 1080px;
                    top: 500px;
                }
            }
        </style>
    </head>
    <body>
        <dic class="red"></dic>
    </body>
</html>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>動畫版輪播圖</title>
        <style type="text/css">
            @keyframes run{
                0%{
                    transform: translateX(0px);
                }
                20%{
                    transform: translateX(0px);
                }
                25%{
                    transform: translateX(-20%);
                }
                45%{
                    transform: translateX(-20%);
                }
                50%{
                    transform: translateX(-40%);
                }
                70%{
                    transform: translateX(-40%);
                }
                75%{
                    transform: translateX(-60%);
                }
                95%{
                    transform: translateX(-60%);
                }
                100%{
                    transform: translateX(-80%);
                }
            }
            .wrap{
                width: 60%;
                height: 380px;
                border: solid 5px black; 
                /*overflow: hidden;*/
            }
            .box{
                height: 100%;
                width: 500%;
                animation: 10s linear run infinite;
            }
            .box .item{
                width: 20%;
                height: 100%;
                float: left;
                text-align: center;
                color: white;
                font-size: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .item1{
                background-color: red;
            }
            .item2{
                background-color: blue;
            }
            .item3{
                background-color: green;
            }
            .item4{
                background-color: pink;
            }

        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <div class="item item1">1</div>
                <div class="item item2">2</div>
                <div class="item item3">3</div>
                <div class="item item4">4</div>
                <div class="item item1">1</div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>方向鍵控制移動</title>
        <style type="text/css">
            .box{
                position: relative;
                border: 5px yellow solid;
                margin: 20px auto;
                width: 600px;
                height: 480px;
                background: url("bg.png") 100%;
                animation: run 2s linear infinite;
            }
            @keyFrames run{
                from{
                    background-position: 0 0;
                }
                to{
                    background-position: 0 960px;
                }
            }
            .item{
                width: 45px;
                height: 80px;
                background-color: purple;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
        </div>
    </body>
    <script type="text/javascript">
        var item = document.getElementsByClassName("item")[0];
        var box = document.getElementsByClassName("box")[0];
        var key = [false, false, false, false];
        document.onkeydown = function(ev){
            if (ev.keyCode > 36 && ev.keyCode < 41) {
                key[ev.keyCode - 37] = true;
            }
        }
        document.onkeyup = function(ev){
            key[ev.keyCode - 37] = false;
        }
        setInterval(function(){
            var x = item.offsetLeft + (key[0] * - 1) + key[2];
            var y = item.offsetTop + (key[1] * - 1) + key[3];
            var maxX = box.clientWidth- item.offsetWidth;
            x = x < 0 ? 0 : (x > maxX ? maxX : x);
            var maxY = box.clientHeight- item.offsetHeight;
            y = y < 0 ? 0 : (y > maxY ? maxY : y);
            item.style.left = x + "px";
            item.style.top = y + "px";
        }, 20);
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拖拽</title>
        <style type="text/css">
            .item{
                width: 100px;
                height: 100px;
                background-color: purple;
                position: absolute;;
                left: 0;
                top: 0;
            }
            .box{
                width: 150px;
                height: 150px;
                background-color: pink;
                margin: 100px auto;
            }
            .item1{
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background-color: purple;
                position: absolute;
                left: 200;
                top: 200;
            }
            .box1{
                width: 150px;
                height: 150px;
                border-radius: 75px;
                background-color: pink;
                margin: 200px auto;
            }
        </style>
    </head>
    <body>
        <div class="item"></div>
        <div class="box"></div>
        <div class="item1"></div>
        <div class="box1"></div>
    </body>
    <script type="text/javascript">
        var item = document.getElementsByClassName("item")[0];
        var box = document.getElementsByClassName("box")[0];
        var item1 = document.getElementsByClassName("item1")[0];
        var box1 = document.getElementsByClassName("box1")[0];

        item.onmousedown = function(e){
            var x = e.offsetX;
            var y = e.offsetY;
            document.onmousemove = function(ev){
                item.style.left = ev.pageX - x + "px";
                item.style.top = ev.pageY - y + "px";
                if (item.offsetLeft + item.offsetWidth > box.offsetLeft && item.offsetLeft < box.offsetLeft + box.offsetWidth && item.offsetTop + item.offsetHeight > box.offsetTop && item.offsetTop < box.offsetTop + box.offsetHeight) {
                    box.style.backgroundColor = "#00FF00";
                } else{
                    box.style.backgroundColor = "pink";
                }
            }
        }
        item1.onmousedown = function(e){
            var x = e.offsetX;
            var y = e.offsetY;
            document.onmousemove = function(ev){
                item1.style.left = ev.pageX - x + "px";
                item1.style.top = ev.pageY - y + "px";
                var A = Math.abs((item1.offsetLeft + item1.offsetWidth / 2) - (box1.offsetLeft + box1.offsetWidth / 2));
                var B = Math.abs((item1.offsetTop + item1.offsetHeight / 2) - (box1.offsetTop + box1.offsetHeight / 2));
                var C = Math.sqrt(A * A + B * B);
                // console.log(A);
                // console.log(B);
                // console.log(C);
                if (C <= item1.offsetWidth / 2 + box1.offsetWidth / 2){
                    box1.style.backgroundColor = "#00FF00";
                } else{
                    box1.style.backgroundColor = "pink";
                }
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    </script>
</html>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>打飛機</title>
        <style type="text/css">
            .box{
                position: relative;
                border: 5px black solid;
                width: 300px;
                height: 480px;
                margin: 20px auto;
                background: url("bg.png") 0px 0px / 100%;
                animation:run 4s linear infinite;
            }
            @keyframes run{
                from{
                    background-position: 0px 0px;
                }
                to{
                    background-position: 0px 960px;
                }
            }

            .item{
                width: 60px;
                height: 60px;
                background-color: gray;
                position: absolute;
                top: 0px;
                left: 0px;
                background: url("fj.jpeg") 0px 0px / 100% ;
            }
            .zd{
                width: 5px;
                height: 20px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
        </div>

    </body>
    <script type="text/javascript">
        var item = document.getElementsByClassName('item')[0];
        var box = document.getElementsByClassName('box')[0];
        var key = [false, false, false, false];

        document.onkeydown = function(ev){
            key[ev.keyCode - 37] = true;
        }

        document.onkeyup = function(ev){
            key[ev.keyCode - 37] = false;
        }
        setInterval(function(){
            var speed = 3;
            var iLeft = item.offsetLeft + ((key[0]* -1) + key[2]) * speed;
            var iTop = item.offsetTop + ((key[1]* -1) + key[3]) *speed;
            // 限制Left
            var maxX = box.clientWidth - item.offsetWidth;
            iLeft = iLeft < 0 ? 0 : (iLeft > maxX ? maxX : iLeft);
            // 限制Top
            var maxY = box.clientHeight - item.offsetHeight;
            iTop = iTop < 0 ? 0 : (iTop > maxY ? maxY : iTop);

            item.style.left =  iLeft + "px";
            item.style.top =  + iTop + "px";
        }, 20);


        // 每隔0.5創建子彈
        setInterval(function(){
            var zd = document.createElement("div");
            zd.className = "zd";
            box.appendChild(zd);    
            zd.style.top = item.offsetTop - zd.offsetHeight + "px";
            zd.style.left = item.offsetLeft+item.offsetWidth/2 - zd.offsetWidth/2 + "px";
            var move = setInterval(function(){
                zd.style.top = zd.offsetTop - 3 + "px";
                if (zd.offsetTop <= -zd.offsetHeight) {
                    zd.remove();
                    clearInterval(move);
                }
            }, 20);
        }, 500);
    </script>
</html>

http://blog.csdn.net/huzongnan/article/list

HTML 之事件與事件對象和動畫

事件

事件對象

動畫

HTML 之事件捕獲和冒泡以及事件的綁定

Java 之 Java 集合總結

Java 之 Java 緩衝流與序列化

Java 之 Java 異常處理

HTML 之事件與事件對象和動畫

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

HTML 之 事件與事件對象和動畫

事件

事件對象

動畫

HTML 之事件與事件對象和動畫