2. 程式人生 > >jS事件基礎應用

jS事件基礎應用

阿新 • • 發佈：2019-02-15

下拉選單

這裡寫圖片描述

<!--簡單的設定了樣式，方便起見，將style和script寫到同一個文件，著重練習事件基礎-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0;
            padding:0;
        }
            ul {
                list-style
 
: none;
            }
            body{
                margin:20px auto;
            }
            .ul>li {
                float: left;
                width:150px;
                height:35px;
                line-height:35px;
                background:mediumaquamarine;
                position
 
:relative;
            }
            #nav div{
                background:bisque;
                position:absolute;
                left:0px;
                top:35px;
                width:150px;
                display:none;

            }
        </style>
    </head>

    <body>
        <div
 
 id="nav">
            <ul class="ul">

                <li onmouseover="show('div1')" onmouseout="hide('div1')">下拉選單
                    <div id="div1">
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                    </div>
                </li>

                <li onmouseover="show('div2')" onmouseout="hide('div2')">下拉選單
                    <div id="div2">
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                    </div>
                </li>
                <li onmouseover="show('div3')" onmouseout="hide('div3')">下拉選單
                    <div id="div3">
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                    </div>
                </li>
                <li onmouseover="show('div4')"  onmouseout="hide('div4')">下拉選單
                    <div id="div4">
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                        <p>下拉選單</p>
                    </div>
                </li>

            </ul>
        </div>
        <script>
            function show(id){
                document.getElementById(id).style.display="block";
            }
            function hide(id){
                document.getElementById(id).style.display="none";
            }
        </script>
    </body>

</html>

表格隨機轉換

這裡寫圖片描述

<!--style樣式可隨己自行設定-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格隨機轉換</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            td {
                width: 100px;
                height: 30px;
                border: 1px solid darkblue;
            }
        </style>
    </head>

    <body>

        <table>
            <tr style="background:pink">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script>
            var str = ["coral", "chartreuse", "cornflowerblue", "aqua", "antiquewhite", "purple", "white", "black"];
            window.onload = function() {
                var tr = document.getElementsByTagName("td");
                var colo = parseInt(Math.random() * str.length);
                for(var i = 1; i < tr.length; i++) {
                    if(i % 2 != 0) {
                        tr[i].style.background = str[colo];
                    } else {
                        var colo = parseInt(Math.random() * str.length);
                        tr[i].style.background = str[colo];
                    }
                }
                for(var i = 0; i < tr.length; i++) {
                    tr[i].onmouseover = function() {
                        bgc = this.style.background;
                        this.style.background ="green";
                    }
                }
                for(var i = 0; i < tr.length; i++) {
                    tr[i].onmouseout = function() {
                        this.style.background = bgc;
                    }
                }
            }
        </script>
    </body>

</html>

諮詢緩慢彈框

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>     
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                width: 500px;
                height: 300px;
                position: fixed;
                right: 0;
                background: pink;
            }

            #box h2 {
                height: 50px;
                line-height: 50px;
                position: relative;
                background: darkturquoise;
            }

            #box h2 p {
                width:50px;
                height:50px;
                position: absolute;
                right: 0;
                top: 0;
            }
            textarea{
                margin:2px 40px 0;
            }
            input{
                width:100px;
                height:50px;
                color:#000;
                font-weight:bold;
                margin:0 0 0 250px;
                background:yellow;
            }
        </style>
    </head>

    <body>
        <div id="box" style="bottom:-300px">
            <h2>請諮詢<p onclick="mp()">×</p></h2>
            <textarea cols="30px" rows="7px">
            </textarea>
            <input type="button" value="提交">

        </div>
        <script>
            var v;
            var t;
            var add = -300;
            window.onload = function() {
                v = document.getElementById("box");
                t = setInterval("ups()", 10);
            }
            function ups() {
                add += 3;
                v.style.bottom = add + "px";
                if(parseInt(v.style.bottom) >= 0) {
                    clearInterval(t);
                }
            }
            function mp(){
                v.style.display="none";
            }
        </script>
    </body>

</html>

滑鼠經過改變圖片路徑

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>car滑鼠經過改變圖片路徑</title>
        <style>
            #box img {
                width: 300px;
                height: 300px;
            }

            img {
                width: 50px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <img id="imgb" src="img/1.png">
        </div>

        <img src="img/1.png" onmouseover="f(1)"/>
        <img src="img/2.png" onmouseover="f(2)" />
        <img src="img/3.png" onmouseover="f(3)" />

        <script>
            function f(n) {
                var mg = document.getElementById("imgb");
                mg.src = "img/" + n + ".png";
            }
        </script>
    </body>

</html>

樹形選單

這裡寫圖片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>樹形選單</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            body {
                width: 450px;
                margin: 0 auto;
            }
            .mybox {
                padding: 0 0 0 25px;
                border: 2px solid yellow;
            }
            h2 {
                width: 400px;
                height: 50px;
                line-height: 50px;
                background: pink;
            }
            span {
                float: left;
                margin: 0 10px 0;
            }
            .box {
                width: 400px;
                height: 300px;
                background: greenyellow;
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="mybox">
            <h2 onclick="fun(0)"><span class="mspan">+</span>我是主體欄目</h2>
            <div class="box">
            </div>
            <h2 onclick="fun(1)"><span class="mspan">+</span>我是主體欄目</h2>
            <div class="box">
            </div>
            <h2 onclick="fun(2)"><span class="mspan">+</span>我是主體欄目</h2>
            <div class="box">
            </div>
        </div>

        <script>
            function fun(n) {
                var box = document.getElementsByClassName("box");
                var mspan = document.getElementsByClassName("mspan");
                if(box[n].style.display == "none") {
                    box[n].style.display = "block";
                    mspan[n].innerHTML="-"
                } else {
                    box[n].style.display = "none";
                    mspan[n].innerHTML="+"
                }
            }
        </script>

    </body>
</html>

隔5秒跳轉頁面

這裡寫圖片描述

<!--秒數可更改-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>隔五秒跳轉頁面</title>
    </head>

    <body>
        <p id="mp">5秒後跳轉新頁面
        </p>
        <script>
            var i = 5;
            var t;
            window.onload = function() {
             t = setInterval("fun()", 1000);
            }

            function fun() {
                document.getElementById("mp").innerHTML = (i--) + "秒後跳轉新頁面";
                if(i == 0) {
                    clearInterval(t);
                    location.href="hello.html";
                }
            }
        </script>
    </body>

</html>

文字域輸入字數控制

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文字域輸入字數控制</title>
    </head>

    <body>
        <textarea name="" id="conte" cols="30" rows="10" onkeyup="fun()"></textarea>
        <span id="count">還能輸入10個字</span>
        <script>
            function fun(){
                var t = document.getElementById("conte").value.length;
                document.getElementById("count").innerHTML="還能輸入"+(11-t)+"個字";
                document.getElementById("conte").value=document.getElementById("conte").value.substr(0,10);
            }
        </script>

    </body>

</html>

文字無縫滾動，滑鼠放上去停止

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                height: 50px;
                overflow-y: hidden;
            }
        </style>
        <!--跑馬燈-->
        <!--<marquee direction="up">
            adfasdfasdf
            adfasdfasdf
            </marquee>-->
        <div id="box" onmouseover="stp()" onmouseout="beg()">
            <ol id="ol1">
                <li>1文字無縫滾動</li>
                <li>2文字無縫滾動</li>
                <li>3文字無縫滾動</li>
                <li>4文字無縫滾動</li>
                <li>5文字無縫滾動</li>
                <li>6文字無縫滾動</li>
                <li>7文字無縫滾動</li>
            </ol>
            <ol id="ol2"></ol>

        </div>

        <script>
            t = setInterval("myScroll()", 100);
            var box = document.getElementById("box");
            var ol1 = document.getElementById("ol1");
            var ol2 = document.getElementById("ol2");
            ol2.innerHTML = ol1.innerHTML;

            function myScroll() {
                if(box.scrollTop <= ol1.offsetHeight) {
                    box.scrollTop++;
                } else {
                    box.scrollTop = 0;
                }
            }
            function stp() {
                clearInterval(t);
            }

            function beg() {
                t = setInterval("myScroll()", 100);
            }
        </script>
    </body>

</html>

這裡寫圖片描述

<!--顏色內容自行更改-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            li {
                list-style: none;
                float: left;
                height: 35px;
                width: 100px;
                text-align:center;
                line-height: 35px;
                background: mediumaquamarine;
            }
            li:hover{
                background:bisque;
            }
            #box div {
                clear: both;
                height: 200px;
                width: 400px;
                background: bisque;
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="tab">
            <ul>
                <li onmouseover="showDiv(0)">nav_1</li>
                <li onmouseover="showDiv(1)">nav_2</li>
                <li onmouseover="showDiv(2)">nav_3</li>
                <li onmouseover="showDiv(3)">nav_3</li>
            </ul>
        </div>

        <div id="box">
            <div style="display:block">box_1</div>
            <div>box_2</div>
            <div>box_3</div>
            <div>box_4</div>
        </div>

        <script>

            function showDiv(n) {
                var dv = document.getElementById("box").getElementsByTagName("div");
                for(var j = 0; j < dv.length; j++) {
                    dv[j].style.display = "none";
                }
                dv[n].style.display = "block";

                if(n % 2 == 0) {
                    dv[n].style.background = "##FFE4C4";
                }
            }

        </script>
    </body>

</html>

對聯廣告
可回頂部， 點×進行關閉

這裡寫圖片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                height: 2000px
            }

            #box {
                width: 200px;
                height: 250px;
                background: pink;
                /*  position:fixed;
                top:10px;
                left:20px;
                */
                position: absolute;
                top<

相關推薦

jS事件基礎應用

下拉選單 <!--簡單的設定了樣式，方便起見，將style和script寫到同一個文件，著重練習事件基礎--> <!DOCTYPE html> <html

js事件高階應用01（事件繫結 、高階拖拽）

事件繫結         IE方式               attachEvent(事件名稱、函式)，繫結事件處理函式               detachEvent(事件名稱、函式)，解除繫結        DOM方式                add

JS事件高階應用-1

一個事件可以繫結多個函式語句 一、同一個元素的同一個事件會覆蓋，而繫結不會。 attachEvent（‘ on事件名 ’，執行語句）；ie下 addEventListener（‘ 事件名’，執行語句，false）；谷歌chrome 相容

JS 事件基礎 跟隨滑鼠移動

做一個div跟隨滑鼠移動 注意事項：但凡利用到clientX和clientY，一定要加scrollTop和scrollLeft，因為clientX和clientY都是網頁可視區座標，沒有加被滾動區間的座標 <style> #d

js事件基礎（事件event物件,事件冒泡，滑鼠鍵盤事件）

事件物件（獲取事件的詳細資訊）和事件冒泡： 什麼是event物件：獲取事件的詳細資訊：滑鼠位置、鍵盤按鍵。                    document本質：document.childNodes[0].tagName 獲取event物件（相容性寫法）：var

node.js零基礎詳細教程(4)：node.js事件機制、node異步IO操作

nod server nbsp node i++ 兩個 con 錯誤 定時器 第四章 建議學習時間3小時 課程共10章 學習方式：詳細閱讀，並手動實現相關代碼 學習目標：此教程將教會大家 安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏

js事件流之事件冒泡的應用----事件委託

什麼是事件委託？ 它還有一個名字叫事件代理。 JavaScript高階程式設計上講： 事件委託就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。 用取快遞來解釋這個現象，大家認真領會一下事件委託到底是一個什麼原理： 有三個同事預計會在週一收到快遞。為簽收快遞，有兩種辦法：一

js事件流之事件冒泡的應用----事件委托

mouseout 目標 呵呵 內存占用 設計 onload end elements bre 什麽是事件委托？ 它還有一個名字叫事件代理。 JavaScript高級程序設計上講： 事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。 用取快遞來解

JS丨基礎考察03丨DOM事件類

01. DOM事件類大綱 01. 基本概念: DOM事件的級別 DOM0: element.onclick = function(){} DOM1: DOM1中沒有涉及DOM事件相關的內容 DO

js核心基礎之Events事件機制（移動端事件、PC端事件、事件穿透）

PC端 在pc端，網頁的操作都是用滑鼠的，即響應的都是滑鼠事件，包括mousedown、mouseup、click， 通常，click事件會在mouseup之後觸發，會在300ms之後，因為，會憑藉這個時間去判斷是否觸發雙擊事件（不準確） 1、mo

vue.js中關於$emit(eventName, optionalPayload) 觸發事件的應用，子元件向父元件傳遞資料（字串，陣列，或者物件等）

一、父元件及程式碼解釋：<template> <div> <p v-for="msg in messages">{{msg}}</p>

js事件委托

html == logs click copy var over 按鈕 nload 1，什麽是事件委托：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來

JS 事件綁定、事件監聽、事件委托詳細介紹

兼容性 log 查看 and == 常用 提高 監聽 live 事件綁定 要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操作的函數，不同的操作對應不同的名稱。 在JavaScript中，有三種常用的

[JS] javascript基礎語法

原因 方法 間接 war init err ring tag 是否 1.javascript是什麽 　　js是具有面向對象能力的,解釋性的程序設計語言. 2.js的類型 　　[基本類型]:string number boolean 　　[復合類型]:對象(對象,函數,數

[WF4.0 實戰] 事件驅動應用

and -c put 啟動 eas ets 執行 bookmark 右鍵 看到題目或許非常多人都會疑問，為什麽要使用事件監聽呢？ 眼下的認識： 1,使用事件監聽能夠將工作流的結點返回值返回到client 2,能夠實現等待與重新啟動，相當於之前的WaitAct

JS入門基礎（if else 與 switch case / node安裝）

json health 案例 js文件 動作 require 步驟 *** 命令 在 JavaScript 中，為不同的決定來執行不同的動作，我們可使用以下條件語句： if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼 if...else 語句 - 當條

js事件綁定/監聽

eve dev func add code 不同 ndb mouse 匿名 事件綁定/監聽的方法 1.直接綁定 顧名思義，直接在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick

js程序基礎字符串具體

ring rep ast ascii data- 一個 size per 搜索 1. .charAt()裏面寫數字 在一般瀏覽器上相當於方括號 可是由於IE6的存在他就有了用處 由於IE6不兼容方括號 2. charCodeAt() 和char

js事件相關知識點總結

模型 em1 detach 事件偵聽 包含 ring 分享 target 上傳 HTML頁面是怎樣實現交互的？ 2017-05-22 js事件之事件流： 事件流原理圖：事件流是從window開始，最後回到window的一個過程，分為三個階段(1~5)捕獲過程、(5~6)

分針網—每日分享：Vue.js事件處理器與表單控件綁定

pan alt default efault mage add ref comm 功能 事件處理主要通過v-on這個指令來執行。 事件監聽及方法處理 1.簡單的可以直接內嵌在頁面。 2.可以通過將方法定義在methods中，然後再v-on中執行 3