<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期特效</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#date{
width: 450px;
height: 300px;
background-color: darkorange;
border-radius: 10px;
margin: 100px auto;
}
#nowDate{
width: 450px;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
font-size: 26px;
}
#day{
width: 200px;
height: 200px;
line-height: 200px;
background-color: orchid;
margin: 0 auto;
text-align: center;
color:#fff;
font-weight: bold;
font-size: 60px;
}
</style>
</head>
<body>
<div id="date">
<p id="nowDate"></p>
<p id="day"></p>
</div>
<script type="text/javascript">
// 1.获取标签
var nowDate = document.getElementById('nowDate');
var day = document.getElementById('day');
// 用定时器 更新时间的变化
setInterval(nowNumTime, 10);
function nowNumTime(){
var now = new Date();
var hour = now.getHours(); //0 ~ 23. //19
var minute = now.getMinutes();
var second = now.getSeconds();
var year = now.getFullYear();
var month = now.getMonth();
var d = now.getDate();
var week = now.getDay();
//console.log(week); //索引
var weeks = ['星期天','星期一','星期二','星期叁','星期肆','星期伍','星期六'];
// 18 > 12 ? 18-12 : 8
var temp = '' + (hour > 12 ? hour - 12 : hour);
if(hour === 0){
temp = '12';
}
temp = temp +(minute < 10 ? ':0': ":")+ minute;
temp = temp +(second < 10 ? ':0': ":")+ second;
temp = temp + (hour >= 12 ? ' P.M.': " A.M.");
temp = `${year}年${month}月${d}日 ${temp} ${weeks[week]}`;
nowDate.innerHTML = temp;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform的运用</title>
<style type="text/css">
#box{
margin-top: 10px;
height: 50px;
width: 50px;
background-color: #ff6700;
/*transform: translate(100px,100px);*/
}
</style>
</head>
<body>
<button id="btn">move it</button>
<div id="box"></div>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var index = 1;
window.onload = function () {
btn.onclick = function () {
box.style.transform = `translate(${10*index}px,${5*index}px)
rotate(${0.2*index}deg) scale(2.0) skew(${0.1*index}deg)`;
index++;
}
}
</script>
</body>