七夕,生日 礼物 +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>