JavaScript案例——红绿灯

前言：
大概快2周没写博客了，今天来更一下吧，今天更新的是一个小案例。

今天在腾讯云申请了一个免费的服务器，然后域名正在购买中，接下来
我会把我自己做的一些小案例放在上边，欢迎大家来测试，然后提出修改意见。

如果有大佬做项目愿意带我的也可以通过主页或者私信联系我，如果你和我一样是
初学者，想找人一起做项目的，也可以找我。

如果你是学生，自己的网页设计作业不想写，也可以找我，我可以代写，
当然，这个代写是有偿的，一方面我想锻炼自己的技术，另一方面也能赚点零花钱。

原理：

这个案例是我有天晚上睡不着，然后大脑超级清醒，就想出来的一个小案例，
本来一会倒计时会用（将来时间）- （现在时间）来做，
我也用这个想法去做了，发现实现的不是很好。
用一个变量--来控制红绿灯的倒计时，
用定时器来实现倒计时。

因为链接时腾讯云得临时链接，可能会过期，后续域名申请下来后，我会把链接该过来。
点击查看效果
今天学习了在git上让自己的项目可以被别人访问，我上传了git，点击链接可以直接查看效果git链接

代码：

HTML部分，这部分的内容很少，主要就是几个框架。

<button class="big">点击修改红灯和绿灯的时长</button>
    <button class="small">点击修改黄灯的时长</button>
    <div class="row">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="Box"></div>
    </div>
    <div class="content">
        <ul class="r">
            <li class="red_end">30</li>
            <li class="yellow_end"></li>
            <li class="green_end"></li>
        </ul>
        <ul class="l">
            <li class="red_end"></li>
            <li class="yellow_end"></li>
            <li class="green_end"></li>
        </ul>
    </div>

CSS部分：
样式部分也比较简单，没有搞得太过认真，就大概修饰了一下。

* {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            box-sizing: border-box;
        }

        .row {
            position: absolute;
            top: 300px;
            width: 100%;
            height: 300px;
            background-color: pink;
            line-height: 200px;
        }

        .col {
            position: absolute;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            height: 800px;
            background-color: pink;
        }

        .content {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: -150px;
            width: 300px;
            height: 300px;
            background-color: #e88769;
            text-align: center;
            line-height: 200px;
        }

        .r {
            width: 60px;
            height: 150px;
            border: 1px solid transparent;
            margin-top: 75px;
            border-radius: 30px;
            background-color: #74e5e5;
        }

        li {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            line-height: 40px;
            text-align: center;
        }

        .r li {
            margin-left: 10px;
            margin-top: 7px;
        }

        .l {
            width: 150px;
            height: 60px;
            border: 1px solid transparent;
            margin-left: 75px;
            border-radius: 30px;
            background-color: #74e5e5;
        }

        .l li {
            float: left;
            margin-top: 10px;
            margin-left: 7px;
        }

        .red_s {
            background-color: #ee0905;
        }

        .red_end {
            background-color: #ac0702;
        }

        .yellow_s {
            background-color: #eeed77;
        }

        .yellow_end {
            background-color: #b3b34f;
        }

        .green_s {
            background-color: #a5f04a;
        }

        .green_end {
            background-color: #54762f;
        }

        .box {
            position: absolute;
            top: 50px;
            left: 100px;
        }

        .Box {
            position: absolute;
            top: 100px;
            left: 50px;
        }

        .big {
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .small {
            position: absolute;
            top: 100px;
            left: 50px;
        }

js部分：
这部分的代码比较多一点，毕竟大多的功能都是js撑起来的。
注释有点少，毕竟当时我也是摸索着写出来的，但是我觉得看函数的名字就可以知道是控制那个部分的。

<script>
        let big = document.querySelector('.big');
        let small = document.querySelector('.small');
        let NS = document.querySelector('.l');
        let WE = document.querySelector('.r');
        let box = document.querySelector('.box');
        let Box = document.querySelector('.Box');


        // 倒计时模块
        var longNum = 10;
        var shortNum = 3;
        big.addEventListener('click', function () {
            let inputNum = prompt('请输入你想设置的秒数:');
            longNum = inputNum == '' ? longNum : inputNum;
        })
        small.addEventListener('click', function () {
            let inputNum = prompt('请输入你想设置的秒数:');
            shortNum = inputNum == '' ? longNum : inputNum;
        })
        green();
        Green = setInterval(green, 1000);

        function green() {
            NS.children[2].className = 'green_s';
            point(Box);
            NS.children[2].innerHTML = longNum;
            WE.children[0].className = 'red_s';
            caveat(box);
            WE.children[0].innerHTML = longNum;
            if (longNum == -1) {
                clearInterval(Green);
                NS.children[2].className = 'green_end';
                del(Box);
                NS.children[2].innerHTML = '';
                WE.children[0].className = 'red_end';
                del(box);
                WE.children[0].innerHTML = '';
                longNum = 10;
                NS.children[1].className = 'yellow_s';
                WE.children[1].className = 'yellow_s';
                yellow();
                Yellow = setInterval(yellow, 1000);
                remind(box);
                remind(Box);
            }
            longNum--;
        }

        function yellow() {
            NS.children[1].innerHTML = shortNum;
            WE.children[1].innerHTML = shortNum;
            if (shortNum == -1) {
                del(box);
                del(Box);
                clearInterval(Yellow);
                NS.children[1].className = 'yellow_end';
                NS.children[1].innerHTML = '';
                WE.children[1].className = 'yellow_end';
                WE.children[1].innerHTML = '';
                shortNum = 3;
                NS.children[0].className = 'red_s';
                caveat(Box);
                WE.children[2].className = 'green_s';
                point(box);
                red();
                Red = setInterval(red, 1000);
            }
            shortNum--;
        }

        function red() {
            NS.children[0].innerHTML = longNum;
            WE.children[2].innerHTML = longNum;
            if (longNum == -1) {
                clearInterval(Red);
                NS.children[0].className = 'red_end';
                del(Box);
                NS.children[0].innerHTML = '';
                WE.children[2].className = 'green_end';
                del(box);
                WE.children[2].innerHTML = '';
                longNum = 10;
                NS.children[2].className = 'green_s';
                WE.children[2].className = 'green_end';
                green();
                Green = setInterval(green, 1000);
            }
            longNum--;
        }

        function caveat(concent) {
            concent.style.color = 'red';
            concent.innerHTML = '闯红灯,等着大家都去你家吃席';
        }

        function remind(concent) {
            concent.style.color = 'yellow';
            concent.innerHTML = '黄灯了,还没过去的抓紧时间,马上车就来撞你了';
        }

        function point(concent) {
            concent.style.color = 'green';
            concent.innerHTML = '绿灯也要注意安全哟!';
        }

        function del(concent) {
            concent.innerHTML = '';
        }
    </script>