JavaScript-作业（一）

最新推荐文章于 2023-09-07 12:59:04 发布

ll_j_21

最新推荐文章于 2023-09-07 12:59:04 发布

阅读量1.6k

点赞数 2

分类专栏： Java se

本文链接：https://blog.csdn.net/ll_j_21/article/details/102876286

版权

Java se 专栏收录该内容

222 篇文章 5 订阅

订阅专栏

春节倒计时

<!DOCTYPE html>
<html>
<head>
	<title>春节倒计时</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/春节倒计时.css">
	<script type="text/javascript" src="./js/春节倒计时.js"></script>
</head>
<body>
     <div id="show"></div>
     <div id="quer">春节倒计时</div>
</body>
</html>

#show{
	width: 400px;
	height: 400px;
	border-radius: 400px;
	background-color: red;
	font-size: 26px;
	text-align: center;
	line-height: 400px;
	margin:auto;
}
#quer{
	width: 500px;
	height: 100px;
	background-color: red;
	font-size: 26px;
	line-height: 100px;
	text-align: center;
	margin:auto;
	margin-top:50px;
}

function sor(){
	var timego=new Date("2020-01-24 12:00:00")
	var timenow=new Date();//获取当前时间
	var time=timego.getTime()-timenow.getTime();//时间戳差的毫秒数
	var day=parseInt((time/(1000*60*60*24))%365);//天数
	var hour=parseInt((time/(1000*60*60))%24);//时
	var min=parseInt((time/(1000*60))%60);//分
	var seconds=parseInt((time/1000)%60);//秒
	var hm=parseInt(time%1000);//毫秒
	var show=document.getElementById("show");
	show.innerHTML=day+"天"+hour+"："+min+"："+seconds+"："+hm
}
setInterval(sor,1);

在这里插入图片描述

时钟展示

<!DOCTYPE html>
<html>
<head>
	<title>时钟展示</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/时钟展示.js"></script>
</head>
<body>
   当前系统时间：<span id="show"></span>
</body>
</html>

function dat(){
	var data=new Date();
	var year=data.getFullYear();
    console.info();
    var mon=data.getMonth();
    console.info();
    var day=data.getDate();
    console.info();
    var week=data.getDay();
    console.info();
    var hour=data.getHours();
    console.info();
    var min=data.getMinutes();
    console.info();
    var s=data.getSeconds();
    console.info();
    var m=data.getMilliseconds();
    console.info();
    var show=document.getElementById("show");
    show.innerHTML=year+"年"+mon+"月"+day+"日"+hour+":"+min+":"+s+":"+m;
    // document.write("当前系统时间是:"+year+"年"+mon+"月"+day+"日"+hour+":"+min+":"+s+":"+m);
}
 setInterval(dat,1);

在这里插入图片描述

十秒倒计时

<!DOCTYPE html>
<html>
<head>
	<title>十秒倒计时</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/十秒倒计时.css">
	<script type="text/javascript" src="./js/十秒倒计时.js"></script>
</head>
<body>
       <div id="show">十秒倒计时：</div>
</body>
</html>

#show{
	width: 600px;
	height: 100px;
	text-align: center;
	font-size: 26px;
	color: red;
	background-color: yellow;
	margin:auto;
	line-height: 100px;
	
}

var time=10;

function ten(){
	time>0?time--:clearInterval(int);
	document.getElementById("show");
	show.innerHTML=time+"s";
	
	
}
var int=setInterval(ten,1000);

在这里插入图片描述