鍓嶇涔婮avaScript缁冧範绛夌浉鍏冲唴瀹?58

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鍓嶇涔婮avaScript缁冧範绛夌浉鍏冲唴瀹?58相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/active' title='active'>active   creat   button   ntb   length   attribute   remove   current   瀵嗙爜   

javascript缁冧範

1.妯℃€佹

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f6c2d2;
        }
?
        .box2 {
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: 0 auto;*/
            /*margin-top: 100px;*/
?
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;
?
            text-align: center;
            line-height: 500px;
            color: red;
        }
?
        .box3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 50px;
?
        }
    </style>
</head>
<body>
<input type="button" value="寮瑰嚭妯℃€佹" id="btn">
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function () {
        // alert(123)
        var box1 = document.createElement("div")
        var box2 = document.createElement("div")
        var box3 = document.createElement("div")
?
        box2.innerText = "寮瑰嚭鐨勬ā鎬佹"
        box3.innerText = "X"
?
?
        box1.classList.add("box1")
        box2.classList.add("box2")
        box3.classList.add("box3")
?
        box1.appendChild(box2)
        box2.appendChild(box3)
?
        var body = document.getElementsByTagName(鈥榖ody鈥?[0]
        body.appendChild(box1)
?
?
        box3.onclick = function () {
            body.removeChild(box1)
        }
    }
?
</script>
</body>
</html>

2.妯℃€佹鎷撳睍

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f6c2d2;
            display: none;
        }
?
        .box2 {
            width: 500px;
            height: 500px;
            background-color: white;
            /*margin: 0 auto;*/
            /*margin-top: 100px;*/
?
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;
?
            color: red;
        }
?
        .box3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 50px;
?
        }
    </style>
</head>
<body>
<input type="button" value="寮瑰嚭妯℃€佹" id="btn">
<div class="box1">
    <div class="box2">
        <form action="">
            <p>
                鐢ㄦ埛鍚嶏細<input type="text" name="username">
            </p>
            <p>
                瀵嗙爜锛?span class="cm-tag cm-bracket"><input type="text" name="password">
            </p>
            <p>
                <input type="button" value="鎻愪氦">
            </p>
        </form>
        <div class="box3">X</div>
    </div>
</div>
<script>
    var btn = document.getElementById("btn")
    var box1 = document.getElementsByClassName(鈥榖ox1鈥?[0]
?
    btn.onclick = function () {
        box1.style.display = "block"
    }
?
    var box3 = document.getElementsByClassName(鈥榖ox3鈥?[0]
    box3.onclick = function () {
        box1.style.display = "none"
        document.getElementsByName("username")[0].value = ""
        document.getElementsByName("password")[0].value = ""
    }
</script>
</body>
</html>

3.鐐规垜鏈夋儕鍠?/span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: auto;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
    鐐瑰嚮鏈夋儕鍠滐紒
</div>
<script>
    var box = document.getElementsByClassName("box")[0]
    var count = 0
    box.onclick = function () {
        count++
        if (count % 4 == 1) {
            this.style.backgroundColor = "green"
            this.innerText = "缁х画鐐瑰嚮锛?
        } else if (count % 4 == 2) {
            this.style.backgroundColor = "yellow"
            this.innerText = "绮惧僵鍗冲皢鎻檽"
?
        } else if (count % 4 == 3) {
            this.style.backgroundColor = "pink"
            this.innerText = "楠椾綘鐨勫偦閫?
?
        } else {
            this.style.backgroundColor = "red"
            this.innerText = "鐐瑰嚮鏈夋儕鍠滐紒"
            // count=0
?
        }
?
    }
</script>
</body>
</html>

4.绠€鏄撹瘎璁烘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            background-color: #f6c2d2;
            width: 600px;
        }
?
        ul > li {
            list-style: none;
            background-color: #f5deb3;
            border: 1px dotted black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>璇勮鍖猴細</p>
    <ul></ul>
</div>
<div class="box2">
    <p>鐣欒█鍐呭</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="鎻愪氦" id="btn">
        <input type="button" value="缁熻" id="cal">
    </p>
</div>
?
<script>
    var btn = document.getElementById("btn")
    var count = 0
    btn.onclick = function () {
        var content = document.getElementById("content")  // 璇勮妗?br>        var val = content.value
?
        if (val.length != 0) {
            var ul = document.getElementsByTagName("ul")[0]  // ul琛紝鐢ㄤ簬鐩涙斁li鏍囩
?
            var li = document.createElement("li")  // 閫犱簡涓€涓猯i鏍囩锛宭i鏍囩閲屾斁璇勮鐨勫唴瀹?br>?
            var p1 = document.createElement("p") // 妤煎眰淇℃伅
            var p2 = document.createElement("p") // 璇勮鍐呭
?
            // 澶勭悊妤煎眰淇℃伅
            count = document.getElementsByTagName("li").length + 1
            var d = new Date()
            p1.innerHTML = "#" + count + "妤? + "&nbsp;&nbsp;&nbsp;&nbsp;" + d.toLocaleString() + "&nbsp;&nbsp;&nbsp;&nbsp;" + "<span class=鈥榙el鈥?gt;鍒犻櫎</span>"
?
            // 澶勭悊璇勮鍐呭
            p2.innerText = val
?
            // 鎶妏1銆乸2鏀惧叆li
            li.appendChild(p1)
            li.appendChild(p2)
?
            // 寰€ul閲屾坊鍔爈i锛屽苟娓呴櫎璇勮妗嗙殑鍐呭
            ul.appendChild(li)
            content.value = ""
?
            var delButtons = document.getElementsByClassName("del")
            var currentButton = delButtons[delButtons.length - 1]
            // alert(currentButton)
            currentButton.onclick = function () {
                // console.log(123123213)
                ul.removeChild(this.parentNode.parentNode)
            }
?
        }
?
    }
?
?
</script>
</body>
</html>

5.绠€鏄撹瘎璁烘鏀硅繘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            background-color: #f6c2d2;
            width: 600px;
        }
?
        ul > li {
            list-style: none;
            background-color: #f5deb3;
            border: 1px dotted black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>璇勮鍖猴細</p>
    <ul></ul>
</div>
<div class="box2">
    <p>鐣欒█鍐呭</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="鎻愪氦" id="btn">
        <input type="button" value="缁熻" id="cal">
    </p>
</div>
?
<script>
    var btn = document.getElementById("btn")
    var count = 0
    btn.onclick = function () {
        var content = document.getElementById("content")  // 璇勮妗?br>        var val = content.value
?
        if (val.length != 0) {
            var ul = document.getElementsByTagName("ul")[0]  // ul琛紝鐢ㄤ簬鐩涙斁li鏍囩
?
            var li = document.createElement("li")  // 閫犱簡涓€涓猯i鏍囩锛宭i鏍囩閲屾斁璇勮鐨勫唴瀹?br>?
            var p1 = document.createElement("p") // 妤煎眰淇℃伅
            var p2 = document.createElement("p") // 璇勮鍐呭
?
            // 澶勭悊妤煎眰淇℃伅
            count = document.getElementsByTagName("li").length + 1
            var d = new Date()
            p1.innerHTML = "#" + "<span class=鈥榥um鈥?gt;" + count + "</span>" + "妤? + "&nbsp;&nbsp;&nbsp;&nbsp;" + d.toLocaleString() + "&nbsp;&nbsp;&nbsp;&nbsp;" + "<span class=鈥榙el鈥?gt;鍒犻櫎</span>"
?
            // 澶勭悊璇勮鍐呭
            p2.innerText = val
?
            // 鎶妏1銆乸2鏀惧叆li
            li.appendChild(p1)
            li.appendChild(p2)
?
            // 寰€ul閲屾坊鍔爈i锛屽苟娓呴櫎璇勮妗嗙殑鍐呭
            ul.appendChild(li)
            content.value = ""
?
            var delButtons = document.getElementsByClassName("del")
            var currentButton = delButtons[delButtons.length - 1]
            // alert(currentButton)
?
            currentButton.onclick = function () {
                // console.log(123123213)
?
?
                // 鎶婂悗闈㈢殑妤煎眰閮藉噺1
                var allNum = document.getElementsByClassName("num")
                var currntNum = this.previousElementSibling
?
?
                for (var i = 0; i < allNum.length; i++) {
                    if (currntNum == allNum[i]) {
                        // alert(i) // 鎵惧埌褰撳墠绱㈠紩
                        for (var j = i + 1; j < allNum.length; j++) {
                            allNum[j].innerText = parseInt(allNum[j].innerText) - 1
                        }
                        break
                    }
                }
?
?
                ul.removeChild(this.parentNode.parentNode)
                count--
?
            }
?
        }
?
    }
?
?
</script>
</body>
</html>

6.閫夐」鍗?/span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
?
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
?
        }
?
        ul > li {
            list-style: none;
            width: 200px;
            height: 80px;
            background-color: gray;
            text-align: center;
            line-height: 80px;
            float: left;
        }
?
        ul:after {
            display: table;
            content: "";
            clear: both;
        }
?
        .content {
            background-color: #f6c2d2;
            width: 600px;
            height: 320px;
            display: none;
        }
?
        li.active {
            background-color: #55bbbb;
        }
?
        div.active {
            display: block;
        }
?
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li class="active">棣栭〉</li>
        <li>鏂伴椈</li>
        <li>鍥剧墖</li>
    </ul>
?
    <div class="content active">
        棣栭〉鍐呭
    </div>
?
    <div class="content ">
        鏂伴椈鍐呭
    </div>
?
    <div class="content">
        鍥剧墖鍐呭
    </div>
</div>
?
<script>
    var arr = document.getElementsByTagName(鈥榣i鈥?
    for (var i = 0; i < arr.length; i++) {
        arr[i].n = i
        arr[i].onclick = function () {
            // alert(this.n)
?
            for (j = 0; j < arr.length; j++) {
                arr[j].classList.remove("active")
                document.getElementsByClassName("content")[j].classList.remove("active")
            }
?
            this.classList.add(鈥榓ctive鈥?
            // document.getElementsByClassName("content")[i].classList.add("active") // 閿欒鐨勫仛娉?br>            document.getElementsByClassName("content")[this.n].classList.add("active")
?
?
        }
    }
</script>
</body>
</html>

 












































































































































































































































































































































































































以上是关于鍓嶇涔婮avaScript缁冧範绛夌浉鍏冲唴瀹?58的主要内容，如果未能解决你的问题，请参考以下文章

绠楁硶-鍔ㄦ€佽鍒掞紙浜岋級

绠楁硶-鍔ㄦ€佽鍒掞紙涓夛級

17-5-缁冧範

linux缁冧範

R|Shiny缁冧範

绐佽HTML5涔婮avascript绯诲垪