七夕礼物

七夕，生日礼物 +html 简单的小红心

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  body{

  }
    .time-item {
      width: 440px;
      height: 45px;
      margin: 0 331px;
    }
    
    .time-item strong {
        background: #ce0c0c;
        color: #00b6ff;
        line-height: 49px;
        font-size: 36px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item > span {
        float: left;
        line-height: 49px;
        color: #00b6ff;
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .title {
      width: 360px;
      height: 50px;
      margin: auto 50px auto  400px;
      color: #00b6ff;
    }
  
  
    .box{
      width: 200px;
      height: 200px;
      margin: 100px auto;
      position: relative;
    }
    .left,.right,.bottom{
      width: 200px;
      height: 200px;
      position: absolute;
      background: red;
    }
    .left{
      right: 100px;
      border-radius: 100px 100px 0 0;
      animation: move 1s infinite linear;
    }
    .right{
      left: 100px;
      border-radius: 100px 100px 0 0;
      transform: rotate(45deg);
      animation: move1 1s infinite linear;
    }
    .bottom{
      top: 100px;
      transform: rotate(45deg);
      animation: move1 1s infinite linear;
    }
    @keyframes show1{
      0%{
        width: 0px;
      }
      100%{
        width: 345px;
      }
    }
    @keyframes move{
      0%{
        transform: scale(1.0) rotate(-45deg);
      }
      50%{
        transform: scale(1.2) rotate(-45deg);
      }
      100%{
        transform: scale(1.0) rotate(-45deg);
      }
    }
    @keyframes move1{
      0%{
        transform: scale(1.0) rotate(45deg);
      }
      50%{
        transform: scale(1.2) rotate(45deg);
      }
      100%{
        transform: scale(1.0) rotate(45deg);
      }
    }
    </style>

</head>
<body>
        <div class="box">
     <div class="left"></div>
     <div class="right"></div>
     <div class="bottom"></div>






  <h1 class="title">距离wowwww，还有</h1>
  
  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>
    <script>
//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
  // 判断参数date是否是日期对象
  // instanceof  instance 实例(对象)   of 的
  // console.log(date instanceof Date);
  if (!(date instanceof Date)) {
    console.error('date不是日期对象')
    return;
  }

  var year = date.getFullYear(),
      month = date.getMonth() + 1,
      day = date.getDate(),
      hour = date.getHours(),
      minute = date.getMinutes(),
      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}

// 获取两个日期的时间差
function getInterval(start, end) {
  // 两个日期对象，相差的毫秒数
  var interval = end - start;
  // 求 相差的天数/小时数/分钟数/秒数
  var day, hour, minute, second;

  // 两个日期对象，相差的秒数
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}



function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}



function my$(id){
    return document.getElementById(id)
}


  // 目标时间
  var endDate = new Date('2222 0:22:0');

// 获取span
var spanDay = my$('day');
var spanHour = my$('hour');
var spanMinute = my$('minute');
var spanSecond = my$('second');

setInterval(countdown, 1000);

countdown();
// 倒计时
function countdown() {

  // 计算时间差
  // 当前时间
  var startDate = new Date();
  // 计算两个日期差
  var interval = getInterval(startDate, endDate);

  setInnerText(spanDay, interval.day);
  setInnerText(spanHour, interval.hour);
  setInnerText(spanMinute, interval.minute);
  setInnerText(spanSecond, interval.second);

}








  function getRandom(min,max){
        return Math.floor(Math.random()* (max-min+1))+min;
    }
    //返回我们要的颜色
    function getRandomcolor(){
        var c1=getRandom(0,255);
        var c2=getRandom(0,255);
        var c3=getRandom(0,255);
        return 'rgb('+c1+','+c2+','+c3+')'
    }
    console.log(getRandomcolor());


    window.onload= function(){
        document.body.style.backgroundColor=getRandomcolor()
    }
    //认识Date 日期内置对象 Date（）构造函数  必须实例化
    var date=new Date();
    console.log(date);
    //1 new date ();参数为空 侧返回当前的时间和日期
    var date=new Date('2019/1/1 08:08:08');
    console.log(date);
    


    //获得1970年到现在的毫秒数
    var date=new Date();
    //1.valueof（）
    //2.getTime（）
    console.log(date.valueOf());
    console.log(date.getTime());
    

//3. +new Date()
var date1=+new Date();
console.log(date1);
//4.HTML5   Date.now()
console.log(Date.now());

        
    </script>
</body>
</html>
猜你喜欢
