JavaScript-案例

时间：2017-10-20 13:37:37 阅读：197 评论：0 收藏：0 [点我收藏+]

标签：over start can one class box oat height reset

时间计时器

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var ID;
        function start(){
            if (ID == undefined) {
                foo();
                ID=setInterval(foo, 1000)
            }
        }
        function stop(){
            clearInterval(ID);
            ID=undefined;
        }
        function foo(){
           var date = new Date();
           document.getElementById(‘timer‘).value=date.toLocaleString();
        }

    </script>
</head>
<body>
<input type="text" id="timer">
<button onclick="start()">begin</button>
<button onclick="stop()">stop</button>

</body>
</html>

View Code

左侧菜单+模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <style>
        *{
            margin-top:0;
        }
        .left_menu{
            width:15%;
            height: 1000px;
            background-color: #e0e0e0;
            float: left;
        }
        .content{
            width:85%;
            height: 1000px;
            background-color: aquamarine;
            float: left;
        }
        .menu{
            width:100%;
            height: 30px;
            line-height: 30px;
            background-color: orangered;
            color: white;
            text-align: center;
            margin-bottom: 5px;
        }
        .hide, .dialog_box{
            display: none;
        }
        .reg{
            width: 60px;
            height: 40px;
            line-height: 40px;
            background-color: red;
            color: white;
            font-size: 20px;
            /*float: right;*/
            margin-left: 100px;
        }
        .fade{
            background-color: grey;
            position: fixed;
            opacity: 0.6;
            top:0;
            left:0;
            bottom:0;
            right:0;
        }
        .model{
            width: 400px;
            height: 300px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
        .exit{
            width: 25px;
            height: 20px;
            /*line-height: 20px;*/
            /*text-align: center;*/
            position: absolute;
            right:0;
            top:0;
            background-color: red;
            color: white;
        }
        .input_fram{
            margin-top: 30px;
            margin-left: 30px;
        }
        .sub{
            width: 250px;
            height: 40px;
            /*background-color: #e0e0e0;*/
            margin-top: 10px;
        }
        .hint{
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            /*margin-left: 30px;*/
            float: left;
        }
        .inp{
            width: 150px;
            height: 30px;
            line-height: 30px;
            float: left;
            margin-left: 5px;
        }
        #cancel{
            width: 150px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            margin-left: 7px;
        }
    </style>
</head>
<body>

<div class="left_menu">
    <div class="title">
        <div class="menu">菜单一</div>
        <div class="sub_menu">
            <p>111</p>
            <p>222</p>
            <p>333</p>
        </div>
    </div>
    <div class="title">
        <div class="menu">菜单二</div>
        <div class="sub_menu hide">
            <p>111</p>
            <p>222</p>
            <p>333</p>
        </div>
    </div>
    <div class="title">
        <div class="menu">菜单三</div>
        <div class="sub_menu hide">
            <p>111</p>
            <p>222</p>
            <p>333</p>
        </div>
    </div>
</div>
<div class="content">
    <button class="reg">注册</button>
</div>

<div class="fade dialog_box"></div>
<form action="" class="model dialog_box">
    <button class="exit">X</button>
    <div class="input_fram">
        <div class="sub"><p class="hint">ip:</p><input type="text" class="inp"></div>
        <div class="sub"><p class="hint">port:</p><input type="text" class="inp"></div>
        <div class="sub"><p class="hint">username:</p><input type="text" class="inp"></div>
        <input type="reset" value="cancel" id="cancel">
    </div>
</form>

<script>
    var ele_menus=document.getElementsByClassName(‘menu‘);
//    var next_tag=ele_menu.nextElementSibling;
    for (var i=0;i<ele_menus.length;i++){
        ele_menus[i].onclick=function () {
            this.nextElementSibling.classList.remove(‘hide‘);   //删除下一个兄弟标签的hide类名；
            var curr_parent_tag=this.parentElement;
            var class_title=this.parentElement.parentElement.children;

//            console.log(‘curr_parent‘,curr_parent_tag);
            for (var j=0;j<class_title.length;j++){
                if (class_title[j]!=curr_parent_tag){
                    class_title[j].children[1].classList.add(‘hide‘);
                }
            }

        }
    }

//    点击注册按钮后显现对话框
    var ele_reg=document.getElementsByClassName(‘reg‘)[0];
    var ele_fade=document.getElementsByClassName(‘fade‘)[0];
    var ele_model=document.getElementsByClassName(‘model‘)[0];
    ele_reg.onclick=function () {
        ele_fade.classList.remove(‘dialog_box‘);
        ele_model.classList.remove(‘dialog_box‘);
    }

//    点击对话框的x按钮,就退出
    var ele_exit=document.getElementsByClassName(‘exit‘)[0];
    ele_exit.onclick=function () {
        ele_fade.classList.add(‘dialog_box‘);
        ele_model.classList.add(‘dialog_box‘);
    }
</script>
</body>
</html>

View Code

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }
        .hide{
            display: none;
        }
        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>
<div class="shade hide handles"></div>
<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>

<script>

    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){
            if(this.value=="click"){
                for(var j=0;j<handles.length;j++){
                    handles[j].classList.remove("hide");
                 }
            }
            else {
                for(var j=0;j<handles.length;j++){
                    handles[j].classList.add("hide");
                }
            }
        }
    }
</script>
</body>
</html>

View Code

div:hover div{ display ：none；}

鼠标悬浮在div上，修改另外一个div的属性（背景颜色或者 display等）

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c0 {
width: 500px;
height: 100px;
}
.c1 {
width: 500px;
height: 100px;
background-color: darkblue;
}

.c-l {
width: 300px;
height: 100px;
background-color: red;
float: left;
}
.c-r {
width: 200px;
height: 100px;
background-color: blanchedalmond;
float: left;
display: none;
}
.c1:hover .c-r {
display: block;
}

</style>
</head>
<body>
<div class="c1">
<div class="c0">
<div class="c-l"></div>
<div class="c-r"></div>
</div>
</div>
</body>
</html>

View Code

JavaScript-案例

标签：over start can one class box oat height reset

原文地址：http://www.cnblogs.com/snail280721764/p/7697168.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行