-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-08-05
来源 ：「s_meng_」
阅读 1264
评论 0
摘要：本文主要介绍了web前端开发Javascript学习--JavaScript案例——红绿灯，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
本文主要介绍了web前端开发Javascript学习--JavaScript案例——红绿灯，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
今天在腾讯云申请了一个免费的服务器，然后域名正在购买中，接下来
我会把我自己做的一些小案例放在上边，欢迎大家来测试，然后提出修改意见。
如果有大佬做项目愿意带我的也可以通过主页或者私信联系我，如果你和我一样是
初学者，想找人一起做项目的，也可以找我。
如果你是学生，自己的网页设计作业不想写，也可以找我，我可以代写，
当然，这个代写是有偿的，一方面我想锻炼自己的技术，另一方面也能赚点零花钱。
原理：
这个案例是我有天晚上睡不着，然后大脑超级清醒，就想出来的一个小案例，
本来一会倒计时会用（将来时间）- （现在时间）来做，
我也用这个想法去做了，发现实现的不是很好。
用一个变量--来控制红绿灯的倒计时，
用定时器来实现倒计时。
因为链接时腾讯云得临时链接，可能会过期，后续域名申请下来后，我会把链接该过来。
点击查看效果
今天学习了在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>
————————————————
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
