当青训营遇上码上掘金

Zhou某人
288 阅读5分钟

当青训营遇上马上掘金,在2023年的寒假专场正好遇上了字节跳动的青训营活动，这是新的开始、新的旅途，遇见字节、遇见志同道合的“码友”，2022年末和2023年初的相遇会让人生也多了一些奇妙。

当看到这个活动的时候想到了快年末以及活动的截止时间也是2022年12月30日，由此想写一个新年的倒计时，当然也是因为想要锻炼一下自己，看看自己是不是手生疏了（我是个新手，学了前端没有多久哦，写的没那么好），主要是想练习一下自己的js的知识点，所以html部分和css部分就不过多的介绍啦，对了还有一点，我写的是PC端的样式嗷，没有写mobile端的样式。

下面是做出来的效果：

1.jpg

2.jpg

>   <div class="container">
>     <h2><span id="title">跨年倒计时</span>2023</h2>
>     <div class="content">
>       <div id="day">--</div>
>       <div id="hour">--</div>
>       <div id="minute">--</div>
>       <div id="second">--</div>
>     </div>
>   </div>
>   <button type="button" class="btn1" onclick="fun1()">恭喜发财</button>
>   <button type="button" class="btn2" onclick="fun2()">发个红包</button>
>   <button type="button" class="btn3" onclick="fun3()">我不要</button>
>   <button type="button" class="btn4" onclick="fun4()">再考虑一下嘛</button>
>   <button type="button" class="btn5" onclick="fun5()">发一个</button>
>   <img src="#" alt="" class="imgs1">
> </body>

CSS部分

    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    background-image: url('https://img.win3000.com/m00/0c/9f/15a450593485a315ed88ece9c9fe0852.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
    overflow: hidden;
}

.container {
    position: absolute;
    display: flex;
    top: 80px;
    left: 100px;
    right: 100px;
    bottom: 80px;
    background-size: cover;
    /*铺满整个容器*/
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 50px 50px rgba(0, 0, 0, 0.8),
        0 0 0 100px rgba(0, 0, 0, 0.3);
}

.container h2 {
    text-align: center;
    font-size: 10em;
    line-height: 0.7em;
    color: #ffffff;
    margin-top: -250px;
}

.container h2 span {
    display: block;
    font-weight: 300;
    letter-spacing: 6px;
    font-size: 20px;
}

.content {
    display: flex;
    margin-top: 50px;
}

.content div {
    position: relative;
    margin: 0px 15px;
    text-align: center;
    background: #333;
    width: 100px;
    height: 100px;
    line-height: 100px;
    /*居中*/
    color: #ffffff;
    font: 500 35px/100px '微软雅黑';
    border-radius: 10px 10px 0 0;
}

.content div:before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0px;
    background: rgb(177, 42, 42);
    width: 100%;
    height: 35px;
    font: 300 0.35em/35px '微软雅黑';
    border-radius: 0 0 10px 10px;
}

.content #day:before {
    content: '天';
}

.content #hour:before {
    content: '时';
}

.content #minute:before {
    content: '分';
}

.content #second:before {
    content: '秒';
}

canvas {
    /*准备画布*/
    width: 100%;
    height: 100%;
}

.imgs1 {
    display: none;
    height: 400px;
    width: 400px;
    opacity: .5;
    position: relative;
    left: 40%;
    top:20%;
}

button {
    display: none;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    height: 50px;
    background: rgb(234, 79, 79);
    font-size: 18px;
    position: relative;
}
button:hover{
    color: #ffffff;
}

.btnBlock {
    /* 显示按钮 */
    display: block;
}

.btn1 {
    top: 70%;
    left: 30%;
    display: block;
}

.btn2 {
    top: 64.1%;
    left: 66%;
    display: block;
}

.btn3 {
    top: 40%;
    left: 20%;
}

.btn4 {
    top: 30%;
    left: 70%;
}

.btn5 {
    top: 500px;
    left: 50%;
}

JS部分

这一部分主要完成三个模块，①计时器；②背景图片的轮播效果；③雪花效果；④皮一下

首先计时器部分使用js中的new Date()函数标准化时间，然后getTime()获取当前的时间，依次将对应数据位置进行计算的即可（向下取整数floor）再设置一个setInterval()函数一秒钟（1000ms）更新一次。

然后背景图片轮播部分，写完之后才发现原来不能上传源文件，后来就在网上直接用网站链接的图片，定义几个变量将几张图片的链接保存其起来，然后用数组的形式去存储变量（方便后续的图片的调用）setInterval()函数去依次进行轮播即可，效果是差不多的。 其次雪花效果，这个效果部分首先就新建div，将雪花在新建的div中显示，三个计时器完成雪花的效果。 
First,雪花的初始化，定义雪花的初始结位置、初始和结束的透明度、初始和结束的大小、持续时间。
Second，克隆一片雪花，使用setTimeout()函数去反复的克隆随机的一片雪花，并将克隆好的雪花添加到页面中。
Third，有雪花落下后将其删除，结束啦。

function show_runtime() {
  var countDay = new Date('2023/1/1 00:00:00:00');
  var now = new Date().getTime();//获取当前时间
  cha = countDay - now;
  var second = 1000;
  var minute = second * 60;
  var hour = minute * 60;
  var day = hour * 24;
  var d = Math.floor(cha / day);
  var h = Math.floor((cha % day) / hour);
  var m = Math.floor((cha % hour) / minute);
  var s = Math.floor((cha % minute) / second);
  if ((d, h, m, s) < 0) {
    f = true;
  } else {
    $('#day').text(d);
    $('#hour').text(h);
    $("#minute").text(m);
    $("#second").text(s);
  }
}
//每秒显示一次
var time = setInterval(() => {
  show_runtime();
  if (f == true) {
    clearInterval(time);
  }
}, 1000)
// time();
//添加背景图轮播
function rollImgs() {
  var items1 = "https://img.win3000.com/m00/0c/9f/15a450593485a315ed88ece9c9fe0852.jpg";//初始化
  var items2 = "https://imgo.68h5.com/img2021/12/23/11/2021122302522150.jpg";
  var items3 = "https://bpic.588ku.com/back_list_pic/22/08/23/3e86a71ca03166a7a4acae5fb388a4e4.jpg!/fh/300/quality/90/unsharp/true/compress/true";
  var items4 = " https://img.redocn.com/sheji/20221117/qingyuandanyingxinnian2022yuandanwanhuiwutaibeijingzhanban_12761895.jpg";
  let arr = [items1, items2, items3, items4];
  var i = 0;
  setInterval(() => {
    i++;
    if (i == 4) {
      i = 0;
    }
    document.body.style.backgroundImage = 'url(' + arr[i] + ')';
  }, 3000)
}
window.onload = rollImgs();
//添加雪花
function snow() {
  var flake = document.createElement('div');
  flake.innerHTML = '❄';
  flake.style.cssText = 'position:absolute;color:#fff;';

  //获取页面的高度 相当于雪花下落结束时Y轴的位置
  var documentHieght = window.innerHeight;
  //获取页面的宽度，利用这个数来算出，雪花开始时left的值
  var documentWidth = window.innerWidth;

  //生成一片雪花的时间
  var millisec = 10;
  //递归生成一片雪花
  setInterval(function () {
    //初始化雪花、大小、位置、透明度、持续时间及其变化
    var startLeft = Math.random() * documentWidth;
    var endLeft = Math.random() * documentWidth;
    var flakeSize = 3 + 20 * Math.random();
    var durationTime = 5000 + 5000 * Math.random();
    var startOpacity = 0.7 + 0.3 * Math.random();
    var endOpacity = 0.2 + 0.2 * Math.random();
    var cloneFlake = flake.cloneNode(true);//克隆一份
    //定义克隆出来的雪花的样式
    cloneFlake.style.cssText += `
                left: ${startLeft}px;
                opacity: ${startOpacity};
                font-size:${flakeSize}px;
                top:-25px;
                    transition:${durationTime}ms;`;

    //加载到页面中
    document.body.appendChild(cloneFlake);
    //让雪花动起来；
    setTimeout(function () {
      cloneFlake.style.cssText += `
                        left: ${endLeft}px;
                        top:${documentHieght}px;
                        opacity:${endOpacity};`;

      //雪花落下后，删除雪花。
      setTimeout(function () {
        cloneFlake.remove();
      }, durationTime);
    }, 0);

  }, millisec);
}
snow();


//皮一下
function fun1() {
  // $('.btn3').toggle('btnBlock');
  // $('.btn4').toggle('btnBlock');
  $('.btn1').css('display', 'none');
  $('.btn2').addClass('btnBlock');

}
function fun2() {
  $('.btn3').addClass('btnBlock');
  $('.btn4').addClass('btnBlock');
  $('.btn2').css('display', 'none');
}
function fun3() {
  $('.btn3').css('display', 'none');
  $('.btn4').addClass('btnBlock');
}
function fun4() {
  $('.btn4').css('display', 'none');
  $('.btn5').css('display', 'block');
}
function fun5() {
  $('.btn5').css('display', 'none');
  $('.imgs1').css('display', 'block');
}

当然我也是仿写友友们写的效果， 相关参考链接[(blog.csdn.net/geyaoisnice…)] [(22条消息) JavaScript 实现雪花效果_搬砖小浩浩的博客-CSDN博客_js雪花]

avatar
文章
阅读
粉丝