这是一个实时显示健康码状态的网页应用，包括当前日期和时间，以及绿码状态的显示。页面中还模拟了健康码的部分功能，如核酸检测结果（阴性）和通信大数据行程卡的查询入口。此外，提到了疫苗接种情况和各地健康码服务热线的信息。数据来源于国家政务服务平台等权威机构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>健康码查询</title>
<script type="text/javascript">
var myVar = setInterval(function() {
myTimer()
}, 1000);
function myTimer() {
var d = new Date();
var yue = d.getMonth() + 1;
var ri = d.getDate();
var xiaoshi = d.getHours();
var fen = d.getMinutes();
var miao = d.getSeconds();
var shijian = yue + "月" + ri + "日 " + xiaoshi + ":" + fen + ":" + miao;
document.getElementById("shijian").innerHTML = shijian;
}
</script>
</head>
<body>
<div
style="position: absolute; left: 0px; top: 0px; width: 980px; height: 1700px; background-color: rgb(0, 128, 0);">
<div
style="position: absolute; left: 40px; top: 40px; width: 900px; height: 920px; background-color: white; border-radius: 25px;">
<div
style="font-size: 70px; text-align: center; top: -50px; position: absolute; width: 900px;">
<p id="shijian"></p>
</div>
<div
style="position: absolute; top: 80px; width: 900px; text-align: center;">
<p style="font-size: 35px;">
健康状况核验<span style="color: rgb(0, 128, 0);">未见异常（绿码）</span>
</p>
</div>
<div style="position: absolute; top: 180px; left: 200px;">
<script type="text/javascript">
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 50; j++) {
var b = Math.floor(Math.random() * 2);
if (b == 1) {
document
.write("<div style='position: absolute;top:"
+ i
* 10
+ "px;left:"
+ j
* 10
+ "px; width:10px;height:10px;background-color: rgb(0, 128, 0);'></div>");
}
}
}
</script>
<div
style="background-color: red; top: 120px; left: 110px; width: 50px; height: 50px; z-index: 0"></div>
</div>
<div>
<div
style='position: absolute; background-color: white; top: 170px; left: 190px; width: 90px; height: 90px;'></div>
<div
style='position: absolute; background-color: rgb(0, 128, 0); top: 180px; left: 200px; width: 70px; height: 70px;'></div>
<div
style='position: absolute; background-color: white; top: 190px; left: 210px; width: 50px; height: 50px;'></div>
<div
style='position: absolute; background-color: rgb(0, 128, 0); top: 200px; left: 220px; width: 30px; height: 30px;'></div>
</div>
<div>
<div
style='position: absolute; background-color: white; top: 600px; left: 190px; width: 90px; height: 90px;'></div>
<div
style='position: absolute; background-color: rgb(0, 128, 0); top: 610px; left: 200px; width: 70px; height: 70px;'></div>
<div
style='position: absolute; background-color: white; top: 620px; left: 210px; width: 50px; height: 50px;'></div>
<div
style='position: absolute; background-color: rgb(0, 128, 0); top: 630px; left: 220px; width: 30px; height: 30px;'></div>
</div>
<div>
<div
style='position: absolute; background-color: white; top: 170px; left: 620px; width: 90px; height: 90px;'></div>
<div
style='position: absolute; background-color: rgb(0, 128, 0); top: 180px; left: 630px; width: 70px; height: 70px;'></div>
<div
style='position: absolute; background-color: white; top: 190px; left: 640px; width: 50px; height: 50px;'></div>
<div
style='position: absolute; background-color: rgb(0, 128, 0); top: 200px; left: 650px; width: 30px; height: 30px;'></div>
</div>
<div
style="font-size: 40px; position: absolute; top: 720px; left: 400px;">*勇</div>
<div
style="font-size: 40px; position: absolute; top: 800px; left: 260px;">3702************10</div>
</div>
<div
style="background-color: rgb(222, 222, 222); height: 60px; width: 430px; top: 1000px; left: 40px; position: absolute; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 40px;">
核酸检测</div>
<div
style="background-color: white; height: 150px; width: 430px; top: 1060px; left: 40px; position: absolute; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: center;">
<span style="font-size: 40px">阴性</span><span
style="font-size: 80px; color: rgb(0, 128, 0);">1</span><span
style="font-size: 40px">天</span>
</div>
<div
style="background-color: rgb(222, 222, 222); height: 60px; width: 430px; top: 1000px; left: 510px; position: absolute; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 40px;">
通信大数据行程卡</div>
<div
style="background-color: white; height: 150px; width: 430px; top: 1060px; left: 510px; position: absolute; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: center;">
<span
style="position: absolute;left:65px;top:35px;width: 300px;height: 80px;background-color: rgb(0,168,0);color:white;border-radius: 50px;font-size: 50px;">点击查询</span>
</div>
<div style="position: absolute;left: 40px;top: 1250px;background-color: rgb(14,144,14);width: 900px;height: 200px;">
<div style="position:absolute;left: 0px;top: 100px;background-color: white;height: 3px;width: 900px;"></div>
</div>
<div style="position: absolute;left: 0px;top: 0px;color: white;top: 1275px;left: 75px;font-size: 35px">
疫苗接种查询
</div>
<div style="position: absolute;left: 0px;top: 0px;color: white;top: 1275px;left: 700px;font-size: 35px">
暂未接种>
</div>
<div style="position: absolute;left: 0px;top: 0px;color: white;top: 1375px;left: 75px;font-size: 35px">
各地健康码服务热线
</div>
<div style="position: absolute;left: 0px;top: 0px;color: white;top: 1375px;left: 860px;font-size: 35px">
>
</div>
<div style="position: absolute;left: 40px;top: 1500px;color: white;font-size: 35px;">数据来源：国家政务服务平台、通信大数据行程卡、山东省公共管理机构</div>
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
