2022新年祝福代码诠释（1）

新年马上就要来临啦 春节到来还有28天下个月的1号~又到了大家准备发放红包和说新年贺词的时候 远在异地的亲戚又不能随时见面 没有什么对于程序员来说是用代码解决不了的 所以给大家准备一个代码的新年祝福和倒计时让我们一起来瞧瞧吧！

先来预览下代码的成果：

是不是很nice？让我们来瞧瞧接下里如何写这样儿的代码吧！

首先我们得明白这样儿的代码要分别几个步骤才能完成  背景  字体  时间  高宽等等

一：设置页面标题与head

我们在utf-8下加入<title>祝华为云小伙伴新年快乐</title>

为了给字体留出一个位置用span来修饰 需要在head中添加俩个内容一个是head1和head1span 让head1的id指向head1

部分代码展示：

h1{
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 60px;
  color: yellow;
  padding: 0 20px;
}
h1 span{
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;
margin-top:30px;
    font-size:40px;
}
</style>

</head>

二：画布的使用（canvas）

首先用var声明俩个变量 ww和wh function onResize() 定义一个size的作用函数 函数体如下

 ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;

让画布的高度和宽度适应到window当前屏幕的高度和宽度

canvas.strokeStyle = "red";
canvas.shadowBlur = 35;
canvas.shadowColor = "hsla(0, 150%, 60%,1)";

设置canvas来实现当前的鼠标点击事件 目的是为了让点击后出现相应的动态效果和效果颜色

三：鼠标点击事件

定义一个onmove的函数 传递过来一个参数e  并让onmove为true确实在移动的前提下 才能进行下面的判断 如果传递过来的参数e如果===touchmove为false则实现if下面的操作

插播：在javascript中 ===和==意义不同  ===代表的是false  ==返回的是true 执行if下的push用法：可向数组的末尾添加一个或多个元素，并返回新的长度。用xy来标记当前的鼠标移动到的位置并为x和y传递参数

function onMove(e){
  mouseMoved = true;
  if(e.type === "touchmove"){
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  }
  else{
    hearts.push(new Heart(e.clientX, e.clientY));
    hearts.push(new Heart(e.clientX, e.clientY));
  }
}

var Heart = function(x,y){
  this.x = x || Math.random()*ww;
  this.y = y || Math.random()*wh;
  this.size = Math.random()*2 + 1;
  this.shadowBlur = Math.random() * 10;
  this.speedX = (Math.random()+0.2-0.6) * 8;
  this.speedY = (Math.random()+0.2-0.6) * 8;
  this.speedSize = Math.random()*0.05 + 0.01;
  this.opacity = 1;
  this.vertices = [];
  for (var i = 0; i < precision; i++) {
    var step = (i / precision - 0.5) * (Math.PI * 2);
    var vector = {
      x : (15 * Math.pow(Math.sin(step), 3)),
      y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
    }
    this.vertices.push(vector);
  }
}

四：设置倒计时

新年倒计时才是本页面的灵魂  如何设置倒计时呢？懂得都懂

用当前window的事件来设置一个开始的事件 倒计时时间=过年时间-当前时间

设置time为2022年2月1日为春节  添加计时器从当前时间开始 设置作用时间 将时间进行一个转换为当前的时间并设置未来的一个时间戳随后定义一个变量来获取倒计时时间是多少 未来时间-现在的时间

再将获取到的时间毫秒为单位/1000来计算  小时数用总小时数-过去的小时数为现在的小时数 在以60秒为一整份 取余计算得到的就是分钟数在用当前的时间%60就是秒数 最后我们插入想要的信息将上述设置的变量插入进去即可

window.onload=function starttime(){
        time(h1,'2022/2/1');     // 2021年春节时间
        ptimer = setTimeout(starttime,1000); // 添加计时器
}

function time(obj,futimg){
        var nowtime = new Date().getTime(); // 现在时间转换为时间戳
        var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
        var msec = futruetime-nowtime; // 毫秒 未来时间-现在时间
        var time = (msec/1000);  // 毫秒/1000
        var day = parseInt(time/86400); // 天  24*60*60*1000 
        var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
        var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
        var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
        obj.innerHTML="<br>距离长大一岁还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>愿华为云社区小伙伴健康快乐<br>愿2022善待我们<br>May Huawei cloud community partners be healthy and happy <br>and may 2022 be kind to us</span>"
        return true;

（可选）我们也可以来设置背景音乐

</script>
  <audio id="bgmusic" src="https://y.qq.com/n/ryqq/player"></audio>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById('bgmusic');
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                    }, false);
                 }
                 audioAutoPlay();
                 });
</script>

src给一个背景的音乐链接 使用上方代码即可

代码到此就诠释的差不多了  我们来一起看看当前的代码效果吧