HTML组件合集
来源：华佗健康网
目录
前言：
新人第一次写文章，这个页面的小组件内容持续更新， 一旦想到新组件会更新到此文章上面。同时也会应用在我的博客上面更新。
1，天气组件
示例：
源码：
<div class="tq"><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ta&skin=orange" frameborder="0" width="400" height="24" allowtransparency="true"></iframe></div>2，倒计时：
这个不是动态获取节假日，所以需要自行修改节假日
示例：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#box p {
font-size: 20px;
letter-spacing: 3px;
font-weight: 500;
color:black;
}
#time {
display: flex;
flex-direction: row;
line-height: 50px;
}
#time span {
font-size: 20px;
}
#day {
color: #000000;
}
#hour,#minute,#second {
text-align: center;
margin-left: 20px;
background-color: #3f5174;
border-radius: 10px;
width: 70px;
height: 50px;
display: block;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="box">
<p>距离七夕情人节，还有</p>
<div id="time">
<span id="day">**天</span>
<strong><span id="hour">**时</span></strong>
<strong><span id="minute">**分</span></strong>
<strong><span id="second">**秒</span></strong>
</div>
</div>
<script>
var daySpan = my$('day');
var hourSpan = my$('hour');
var minuteSpan = my$('minute');
var secondSpan = my$('second');
TimeRow();
setInterval(TimeRow, 1000)
function TimeRow() {
var end = new Date('2021-8-14 0:0:0');
// 节日时间，格式为：年-月-日 时-分-秒
var start = new Date();
var time = getInterval(start, end);
setInnerText(daySpan, time.day+'天');
setInnerText(hourSpan, time.hour+'时');
setInnerText(minuteSpan, time.minute+'分');
setInnerText(secondSpan, time.second+'秒');
}
function my$(id) {
return document.getElementById(id);
}
function setInnerText(element, content) {
// 判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
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
}
}
</script>
</body>
</html>
3，网页小时间
示例：
源码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="datetime">
<script>
setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
</script>
</div>
</body>4，页面IP地址
示例：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
您的IP地址为：<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</body>
<script type="text/javascript">
document.write(returnCitySN["cip"] + ',' + returnCitySN["cname"])
</script>
</html>可以留言想要什么组件，我会尽力去实现。
因篇幅问题不能全部显示，请点此查看更多更全内容