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>

JavaScript案例——红绿灯相关推荐

javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
JavaScript案例之电影院电子选票
JavaScript案例之电影院电子选票源码: <!doctype html> <html lang="en"> <head><meta ...
JavaScript案例之抽奖机
JavaScript案例之抽奖机源码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
JavaScript案例之使用验证码进行简单判断
JavaScript案例之使用验证码进行简单判断源代码: <!DOCTYPE html> <html><head><meta charset="u ...
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
JavaScript案例之跑马灯左右无缝连接效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...
HTML+JavaScript案例
HTML: 用户注册: <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
javascript案例练习
案例1.动态显示时间 <div id="div_1"></div> <script type="text/javascript"& ...
十字路口红绿灯plc程序_PLC编程-典型案例红绿灯控制
使用PLC实现十字路口红绿灯控制,是PLC控制中非常经典的控制案例.如下所示为路口红绿灯示意图: 十字路口红绿灯示意图控制功能信号灯受一个启动开关控制,当启动开关接通时,信号灯系统开始工作,且先南 ...

JavaScript案例——红绿灯

JavaScript案例——红绿灯相关推荐

最新文章

热门文章