Chia sẻ hơn 5+ COVID-19 widgets đẹp cho Blogger
Hiện nay, chúng ta đang và phải đối mặt với một đại dịch bệnh truyền nhiễm với tác nhân là virus SARS-CoV-2, đang diễn ra trên phạm vi toàn cầu. Bản thân mỗi người chúng ta phải luôn cập nhật, theo dõi thông tin về đại dịch để ứng phó với chúng.
Các trang tin tức, học tập,... là nơi mọi người thường hay theo dõi nhất, vì thế việc đặt các tiện ích thống kê thông tin về đại dịch trên hầu hết các trang trên internet để mọi người cùng cập nhật, đấy cũng là giải pháp tốt.
Ok, và đó cũng là lý do cho bài viết hôm nay, mình sẽ cập nhật và share cho các bạn một số widget cho Blogger đẹp và chuẩn xác nhất.
Widget 1
Tiện ích này hiển thị tốt trên sidebar với hướng dọc, mang phong cách đổ bóng và thông tin chuẩn xác nhất.
Các bạn vào Blogger, chọn Bố cục trên menu, nhấp vào Thêm tiện ích, chọn HTML/Javascript và thêm code sau:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<div class="container">
<!-- Card stats -->
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Total Cases</h5>
<span class="h2 font-weight-bold total_cases color-red count">0</span>
</div>
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="fas fa-users"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Deaths</h5>
<span class="h2 font-weight-bold deaths color-blue count">0</span>
</div>
<div class="icon icon-shape bg-gradient-blue text-white rounded-circle shadow">
<i class="fas fa-procedures"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Recovered</h5>
<span class="h2 font-weight-bold recovered color-green count">0</span>
</div>
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="fas fa-child"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">New Cases Today</h5>
<span class="h2 font-weight-bold new_cases color-orange count">0</span>
</div>
<div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
<i class="fas fa-bell"></i>
</div>
</div>
</div>
</div>
<script>
const totalCases = document.querySelector(".total_cases");
const deaths = document.querySelector(".deaths");
const recovered = document.querySelector(".recovered");
const newCases = document.querySelector(".new_cases");
var settings = {
async: true,
crossDomain: true,
url:
"https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php",
method: "GET",
headers: {
"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
"x-rapidapi-key": "7ab5bc98e5msh2a02aa319f5d355p1f98bdjsn76fd281af303"
}
};
$.ajax(settings).done(function(response) {
displayData(response);
});
function displayData(data) {
const parsedData = JSON.parse(data);
console.log(parsedData.countries_stat);
const countries = parsedData.countries_stat;
countries.forEach(function(country) {
if (country.country_name == "Vietnam") {
totalCases.innerHTML = country.cases;
deaths.innerHTML = country.deaths;
recovered.innerHTML = country.total_recovered;
newCases.innerHTML = country.new_cases;
}
});
}
</script>
<style>
.text-muted{color:#8898aa!important}
.text-uppercase{text-transform:uppercase!important}
.text-white{color:#fff!important}
.shadow{box-shadow:0 0 2rem 0 rgba(136,152,170,0.15)!important}
.rounded-circle{border-radius:50%!important}
.font-weight-bold{font-weight:700!important}
h1.title{font-size:1.4rem;font-weight:700;text-align:center;margin:1rem 0}
.col{max-width:100%;flex-basis:0;flex-grow:1}
.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;border:1px solid rgba(0,0,0,0.05);background-color:#fff;background-clip:border-box;border:0;box-shadow:0 0 2rem 0 rgba(136,152,170,0.15);border-radius:15px;margin:10px}
.card-body{min-height:1px;padding:1.5rem;display:flex;padding:.7rem 1.2rem;border-radius:15px}
.card-body .h2{font-size:1.3rem}
.card-body .icon{width:1.6rem;height:1.6rem;max-width:100%;flex:0 0 auto}
.icon-shape{display:inline-flex;padding:12px;text-align:center;border-radius:50%;align-items:center;justify-content:center}
.icon-shape i,.icon-shape svg{font-size:1.2rem}
.bg-gradient-red{background:linear-gradient(87deg,#f5365c 0,#f56036 100%)!important}
.bg-gradient-blue{background:linear-gradient(87deg,#11cdef 0,#1171ef 100%)!important}
.bg-gradient-green{background:linear-gradient(87deg,#2dce89 0,#2dcecc 100%)!important}
.bg-gradient-orange{background:linear-gradient(87deg,#fb6340 0,#fbb140 100%)!important}
@media (min-width:767px){.social{position:absolute;right:0;top:33.33%}.social ul{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}.social ul li{margin:5px 10px}.social ul li a{color:#403f4c;font-size:25px;height:50px;width:50px;text-decoration:none}.social ul li a:hover{color:#272523}}
</style>
Widget 2
Kế thừa từ tiện ích trên, widget này mang mong cách nằm ngang gọn gàng, số liệu thống kê chuẩn xác.
Các bạn vào Blogger, chọn Bố cục trên menu, nhấp vào Thêm tiện ích, chọn HTML/Javascript và thêm code sau:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<div class="container">
<!-- Card stats -->
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Số ca nhiễm</h5>
<span class="h2 font-weight-bold total_cases color-red count">0</span>
</div>
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="fas fa-users"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Tử vong</h5>
<span class="h2 font-weight-bold deaths color-blue count">0</span>
</div>
<div class="icon icon-shape bg-gradient-blue text-white rounded-circle shadow">
<i class="fas fa-procedures"></i>
</div>
</div>
</div>
<div class="card card-stats">
<!-- Card body -->
<div class="card-body">
<div class="col">
<h5 class="card-title text-uppercase text-muted">Phục hồi</h5>
<span class="h2 font-weight-bold recovered color-green count">0</span>
</div>
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="fas fa-child"></i>
</div>
</div>
</div>
</div>
<script>
const totalCases = document.querySelector(".total_cases");
const deaths = document.querySelector(".deaths");
const recovered = document.querySelector(".recovered");
const newCases = document.querySelector(".new_cases");
var settings = {
async: true,
crossDomain: true,
url:
"https://coronavirus-monitor.p.rapidapi.com/coronavirus/cases_by_country.php",
method: "GET",
headers: {
"x-rapidapi-host": "coronavirus-monitor.p.rapidapi.com",
"x-rapidapi-key": "7ab5bc98e5msh2a02aa319f5d355p1f98bdjsn76fd281af303"
}
};
$.ajax(settings).done(function(response) {
displayData(response);
});
function displayData(data) {
const parsedData = JSON.parse(data);
console.log(parsedData.countries_stat);
const countries = parsedData.countries_stat;
countries.forEach(function(country) {
if (country.country_name == "Vietnam") {
totalCases.innerHTML = country.cases;
deaths.innerHTML = country.deaths;
recovered.innerHTML = country.total_recovered;
newCases.innerHTML = country.new_cases;
}
});
}
</script>
<style>
.text-muted {
color: #8898aa !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-white {
color: #fff !important;
}
.shadow {
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15) !important;
}
.rounded-circle {
border-radius: 50% !important;
}
.font-weight-bold {
font-weight: 700 !important;
}
h1.title {
font-size: 1.4rem;
font-weight: 700;
text-align: center;
margin: 1rem 0;
}
.col {
max-width: 100%;
flex-basis: 0;
flex-grow: 1;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
border: 1px solid rgba(0, 0, 0, 0.05);
background-color: #fff;
background-clip: border-box;
border: 0;
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
border-radius: 10px;
margin-bottom: 15px;
width: 30%;
float: left;
margin-right: 15px;
}
.card:last-child {
margin-right: 0;
}
.card-body {
min-height: 1px;
padding: 1.5rem;
display: flex;
padding: .7rem 1.2rem;
border-radius: 15px;
}
.card-body .h2 {
font-size: 1.2rem;
}
.card:after {
content: '';
display: block;
position: absolute;
bottom: 7px;
left: 0;
width: 20px;
height: 42px;
background: rgba(0,0,0,.025);
border-radius: 0 80px 80px 0;
}
.card-body .icon {
width: 3rem;
height: 3rem;
max-width: 100%;
flex: 0 0 auto;
display: none;
}
.card-body h5 {
font-family: 'Roboto','DM Serif Text', sans-serif;
font-size: 8px;
margin-bottom: 5px;
}
.icon-shape {
display: inline-flex;
padding: 12px;
text-align: center;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.icon-shape i,
.icon-shape svg {
font-size: 1.2rem;
}
.bg-gradient-red {
background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}
.bg-gradient-blue {
background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}
.bg-gradient-green {
background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}
.bg-gradient-orange {
background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
}
@media (min-width: 767px) {
.social {
position: absolute;
right: 0;
top: 33.33%;
}
.social ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}
.social ul li {
margin: 5px 10px;
}
.social ul li a {
color: #403f4c;
font-size: 25px;
height: 50px;
width: 50px;
text-decoration: none;
}
.social ul li a:hover {
color: #272523;
}
}
</style>
Widget 3
Widget sau đây với code rất gọn gàng, bởi vì chúng ta sẽ tiến hành nhúng site từ source https://agict.github.io/covid-19/index.html, với UI đẹp và số liệu thống kê luôn được cập nhập.
Widget này sẽ có hai phong cách là light mode và dark mode, hãy chọn kiểu bạn muốn và thêm vào blog nhé.
Light mode
<iframe src="https://agict.github.io/covid-19/index.html"
frameborder="0" scrolling="no"
width="400" height="170">
</iframe>
Dark mode
<iframe src="https://agict.github.io/covid-19/index-dark.html"
frameborder="0" scrolling="no"
width="400" height="170">
</iframe>
Widget 4
Sau đây là widget diễn tả diễn biến dịch chi tiết hơn của thế giới và Việt Nam, với code được lấy ý tưởng từ kenh14.vn.
<div class="trendAd-right crsk14">
<div class="corona_shield-k14">
<div class="content-csk14">
<div class="world-total">
<h4 id="PostDateTimeSpan">Cập nhật lần cuối lúc: 12:27:13 ngày 04/09/2020</h4>
<h3>
<span>
<svg width="17" height="17" viewbox="0 0 17 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M10.4725 12.323C10.4725 12.3433 10.4521 12.3637 10.4521 12.3637C10.4521 12.3637 10.4725 12.3637 10.4725 12.323Z" fill="white"></path>
<path d="M8.5 0C3.80263 0 0 3.80263 0 8.5C0 13.1974 3.80263 17 8.5 17C13.1974 17 17 13.1974 17 8.5C17 3.80263 13.177 0 8.5 0ZM8.5 16.1663C7.09689 16.1663 5.77512 15.7799 4.6567 15.1292V14.9258L4.63636 14.7022L4.55502 14.5598L4.53469 14.1938H4.45335L4.43301 13.9904H4.57536L4.86005 13.7057V13.5634L4.83971 13.4007H4.75837L4.77871 12.9534L4.98206 12.5467C4.98206 12.5467 4.94139 12.3433 4.96172 12.14C4.98206 11.9366 4.96172 11.8553 4.96172 11.8553C4.96172 11.8553 4.96172 11.8553 4.81938 11.7943C4.67703 11.7333 4.61603 11.6316 4.53469 11.5706C4.45335 11.5096 4.37201 11.3469 4.37201 11.3469C4.37201 11.3469 4.16866 11.1842 4.00598 11.1232C3.8433 11.0622 4.00598 11.1232 3.88397 11.1029C3.76196 11.0825 3.4366 10.9402 3.3756 10.8385C3.31459 10.7572 3.00957 10.6148 2.92823 10.5335C2.84689 10.4522 2.78589 10.3911 2.78589 10.3911L2.76555 10.2488C2.76555 10.2488 2.82656 10.1065 2.76555 9.98445C2.70455 9.86244 2.78589 9.84211 2.76555 9.76077C2.74522 9.67943 2.76555 9.59809 2.76555 9.59809L2.62321 9.3744C2.62321 9.3744 2.62321 9.3744 2.5622 9.25239C2.5012 9.13038 2.5012 9.04904 2.39952 8.9677C2.27751 8.88636 2.19617 8.68301 2.05383 8.64234C1.91148 8.60168 1.70813 8.17464 1.70813 8.17464C1.70813 8.17464 1.64713 7.97129 1.44378 7.80861C1.24043 7.64593 1.24043 7.80861 1.09809 7.97129C0.955742 8.13397 0.955742 7.97129 0.955742 7.97129C0.955742 7.97129 0.915072 8.05263 0.874402 8.11364C0.894737 7.76794 0.935407 7.42225 0.996412 7.07656L1.01675 7.05622V6.91388C1.01675 6.89354 1.01675 6.87321 1.03708 6.85287H1.2201V6.73086V6.62919V6.48684L1.15909 6.4055C1.30144 5.89713 1.50478 5.40909 1.7488 4.94139C2.37919 4.35167 3.49761 3.41627 4.37201 3.31459L4.69737 2.41986C4.69737 2.41986 4.69737 2.62321 4.81938 2.41986C4.94139 2.21651 4.69737 2.46053 4.94139 2.21651C5.18541 1.97249 5.18541 1.91148 5.34809 1.83014C5.51077 1.7488 5.57177 1.70813 5.65311 1.64713C5.73445 1.58612 6.01914 1.44378 6.01914 1.44378H6.10048L5.9378 1.62679L5.77512 1.78947L5.59211 1.95215L5.49043 2.01316L5.40909 2.19617L5.49043 2.37919C5.49043 2.37919 5.5311 2.37919 5.71412 2.35885C5.89713 2.33852 6.14115 2.33852 6.10048 2.25718C6.05981 2.17584 6.20215 2.07416 6.28349 2.03349C6.36483 1.99282 6.36483 1.99282 6.36483 1.99282L6.56818 1.89115C6.56818 1.89115 6.56818 1.89115 6.73086 1.80981C6.89354 1.72847 6.89354 1.72847 6.89354 1.72847L7.11723 1.48445H7.23923L7.40191 1.19976V1.03708V0.894737C7.72727 0.833732 8.11364 0.813397 8.47967 0.813397C8.68301 0.813397 8.9067 0.833732 9.11005 0.833732C9.17105 0.894737 9.17105 0.915072 9.17105 0.915072L9.29306 1.13876L9.49641 1.17943L9.55742 1.32177L9.43541 1.50478L9.19139 1.48445C9.19139 1.48445 9.17105 1.48445 9.04904 1.48445C8.88636 1.48445 8.70335 1.48445 8.70335 1.48445H8.5C8.5 1.48445 8.47967 1.56579 8.37799 1.62679C8.27632 1.70813 8.25598 1.60646 8.21531 1.72847C8.17464 1.85048 8.11364 2.05383 8.11364 2.05383L8.13397 2.19617L8.29665 2.29785C8.29665 2.29785 8.39833 2.29785 8.47967 2.29785C8.56101 2.29785 8.82536 2.31818 8.82536 2.31818C8.9067 2.17584 8.74402 1.91148 8.74402 1.91148H8.60168L8.72369 1.70813H8.84569H8.98804L9.15072 1.93182L9.19139 2.13517V2.33852L9.08971 2.52153L8.92703 2.60287H8.68301L8.45933 2.72488L8.19498 2.92823C8.19498 2.92823 8.19498 2.92823 8.07297 3.13158C7.95096 3.33493 7.84928 3.47727 7.84928 3.47727L7.86962 3.68062L7.91029 3.82297C7.74761 3.92464 7.99163 3.8433 7.6256 3.92464C7.32057 4.00598 7.32057 4.00598 7.32057 4.00598C7.32057 4.00598 7.2799 4.02632 7.2189 4.08732C7.17823 4.12799 7.23923 3.88397 7.17823 4.12799C7.09689 4.37201 7.03589 4.51435 7.03589 4.51435L7.23923 4.6567C7.23923 4.6567 7.07656 4.77871 7.23923 4.79904C7.40191 4.81938 7.1579 4.79904 7.40191 4.81938C7.64593 4.83971 7.86962 4.81938 7.86962 4.81938L7.99163 4.63636L8.23565 4.41268L8.39833 4.189L8.52034 4.04665L8.72369 3.94498C8.72369 3.94498 8.84569 3.82297 8.88636 3.92464C8.92703 4.02632 8.9067 4.33134 8.9067 4.33134L9.19139 4.41268H9.3134C9.3134 4.41268 9.35407 4.43301 9.43541 4.49402C9.51675 4.53469 9.65909 4.57536 9.65909 4.57536L9.76077 4.37201L9.92345 4.189C9.92345 4.189 10.0251 4.16866 10.0861 4.16866C10.1675 4.16866 10.2895 4.25 10.2895 4.25L10.5132 4.29067H11.1029L11.3469 4.189L11.4689 4.27034C11.5502 4.47368 11.5096 4.55502 11.4689 4.61603C11.4079 4.67703 11.4079 4.67703 11.4079 4.67703C11.4079 4.67703 11.3876 4.69737 11.1842 4.79904C10.9605 4.90072 10.5132 5.00239 10.4115 5.00239C10.3098 5.00239 10.3098 5.00239 10.3098 5.00239C10.3098 5.00239 10.2691 4.98206 10.0861 4.96172C9.92344 4.94139 9.61842 4.81938 9.61842 4.81938L9.35407 4.69737H9.23206H9.11005C9.11005 4.69737 8.86603 4.67703 8.72369 4.67703C8.58134 4.67703 8.5 4.7177 8.5 4.7177L8.37799 4.73804L8.0323 4.96172L7.74761 5.14474L7.60526 5.24641L7.46292 5.34809L7.34091 5.51077L6.97488 5.81579C6.87321 5.9378 6.87321 5.9378 6.87321 5.9378L6.52751 6.66986V6.87321L6.38517 6.99522V7.34091C6.38517 7.34091 6.50718 7.97129 6.38517 8.05263C6.26316 8.13397 6.38517 8.35766 6.38517 8.35766L6.32416 8.52034L6.64952 8.86603L6.97488 9.11005L7.6866 9.53708H7.80861H8.15431H8.29665C8.29665 9.53708 8.25598 9.41507 8.60168 9.35407C8.94737 9.29306 8.9677 9.3134 8.9677 9.3134L9.13038 9.27273L9.3744 9.29306L9.51675 9.3134L9.67943 9.41507L9.98445 9.53708H10.0861V9.67943V9.92345V10.2081V10.3301V10.5335L10.3301 10.7368V10.9199H10.4318L10.5742 11.2249C10.5742 11.2249 10.6148 11.4282 10.5742 11.6316C10.5335 11.8349 10.5335 11.8349 10.5335 11.8349L10.4522 12.0586C10.4522 12.0586 10.4928 12.1806 10.4725 12.2823C10.4725 12.3026 10.4725 12.323 10.4522 12.3433C10.4725 12.3026 10.5132 12.323 10.5742 12.5873C10.6962 13.0144 10.6962 13.0144 10.6962 13.0144C10.6962 13.0144 10.7165 13.116 10.6962 13.2177C10.6758 13.3194 10.5945 13.6854 10.5945 13.6854L10.6962 13.8278V13.9294H10.7978C10.7978 13.9294 10.6352 14.0108 10.7978 14.0108C10.9605 14.0108 10.9605 14.0108 10.9605 14.0108L11.1232 13.8888C11.1232 13.8888 11.1232 13.7667 11.3469 13.6651C11.5706 13.5634 11.5706 13.5634 11.5706 13.5634L11.6926 13.4617L11.8146 13.3194C11.8146 13.3194 11.9773 13.116 12.0789 13.0347C12.1806 12.9534 12.1806 12.9534 12.1806 12.9534C12.1806 12.9534 12.2213 12.933 12.384 12.75C12.5263 12.567 12.5263 12.567 12.5263 12.567V12.4653L12.7907 12.0993L12.9127 11.8756L13.055 11.3672C13.055 11.3672 13.299 10.6962 13.299 10.6148C13.299 10.5335 13.299 10.3301 13.299 10.3301L13.4414 10.1268C13.4414 10.1268 13.5227 9.55742 13.5431 9.41507C13.5634 9.29306 13.5634 9.29306 13.5634 9.29306C13.5634 9.29306 13.6041 9.33373 13.7057 8.9677C13.8074 8.60168 13.8074 8.60168 13.8074 8.60168V8.39833C13.8074 8.39833 13.7057 8.35766 13.8074 8.21531C13.9091 8.0933 13.9091 8.0933 13.9091 8.0933V7.86962L13.9294 7.52392L13.5837 7.40191L13.4211 7.25957L13.2787 7.1579L13.0754 6.93421L12.933 6.69019C12.7703 6.60885 12.9127 6.69019 12.7703 6.60885C12.628 6.52751 12.628 6.52751 12.628 6.52751C12.628 6.52751 12.3026 6.16148 12.3026 6.08014C12.3026 5.9988 12.3026 5.9988 12.3026 5.9988L12.2823 5.81579C12.2823 5.81579 12.384 5.59211 12.5263 5.81579C12.6687 6.03947 12.567 5.81579 12.6687 6.03947C12.7703 6.26316 12.5467 6.03947 12.7703 6.26316C12.994 6.48684 13.0347 6.26316 13.0347 6.26316C13.0347 6.26316 13.0754 6.18182 13.177 6.26316C13.2787 6.3445 13.4007 6.66986 13.4007 6.66986H13.5024H13.6244C13.6244 6.66986 13.6651 6.66986 13.7464 6.66986C13.8278 6.66986 13.8888 6.66986 13.8888 6.66986C13.8888 6.66986 13.8888 6.42584 13.9904 6.3445C14.0921 6.26316 14.0718 6.44617 14.0921 6.26316C14.1124 6.08014 14.2955 6.08014 14.0921 5.89713C13.8888 5.69378 13.8074 5.65311 13.7871 5.55144C13.7667 5.44976 13.7464 5.51077 13.6651 5.36842C13.5837 5.22608 13.4617 5.0634 13.3194 5.00239C13.177 4.96172 13.116 4.98206 13.055 4.88038C12.9737 4.77871 12.811 4.6567 12.811 4.6567L12.8517 4.53469H13.0144C13.0144 4.53469 13.055 4.63636 13.1364 4.67703C13.2177 4.7177 13.3397 4.86005 13.3397 4.86005C13.3397 4.86005 13.5024 4.88038 13.6651 4.88038C13.8278 4.88038 13.6447 4.96172 13.8074 4.88038C13.9701 4.79904 14.1938 4.73804 14.1938 4.73804L14.4581 4.7177L14.5598 4.53469L14.6818 4.25V4.06699C14.6818 4.06699 14.6615 3.98565 14.6411 3.88397C15.4139 4.90072 15.9222 6.12081 16.1053 7.44258C16.0646 7.54426 16.0646 7.74761 16.1663 8.13397C16.1663 8.25598 16.1663 8.35766 16.1663 8.47967C16.0646 8.60168 15.8002 8.5 15.8002 8.5L15.5156 8.9067L15.1699 9.35407V9.57775V10.3911V10.6352H14.9258V11.0419L14.6208 11.8553V12.0993V12.6687H14.8242L14.8648 12.7703C13.4617 14.8242 11.1232 16.1663 8.5 16.1663Z" fill="white"></path>
<path d="M10.4725 12.323C10.4725 12.3433 10.4521 12.3637 10.4521 12.3637C10.4521 12.3637 10.4725 12.3637 10.4725 12.323Z" fill="white"></path>
<path d="M8.5 0C3.80263 0 0 3.80263 0 8.5C0 13.1974 3.80263 17 8.5 17C13.1974 17 17 13.1974 17 8.5C17 3.80263 13.177 0 8.5 0ZM8.5 16.1663C7.09689 16.1663 5.77512 15.7799 4.6567 15.1292V14.9258L4.63636 14.7022L4.55502 14.5598L4.53469 14.1938H4.45335L4.43301 13.9904H4.57536L4.86005 13.7057V13.5634L4.83971 13.4007H4.75837L4.77871 12.9534L4.98206 12.5467C4.98206 12.5467 4.94139 12.3433 4.96172 12.14C4.98206 11.9366 4.96172 11.8553 4.96172 11.8553C4.96172 11.8553 4.96172 11.8553 4.81938 11.7943C4.67703 11.7333 4.61603 11.6316 4.53469 11.5706C4.45335 11.5096 4.37201 11.3469 4.37201 11.3469C4.37201 11.3469 4.16866 11.1842 4.00598 11.1232C3.8433 11.0622 4.00598 11.1232 3.88397 11.1029C3.76196 11.0825 3.4366 10.9402 3.3756 10.8385C3.31459 10.7572 3.00957 10.6148 2.92823 10.5335C2.84689 10.4522 2.78589 10.3911 2.78589 10.3911L2.76555 10.2488C2.76555 10.2488 2.82656 10.1065 2.76555 9.98445C2.70455 9.86244 2.78589 9.84211 2.76555 9.76077C2.74522 9.67943 2.76555 9.59809 2.76555 9.59809L2.62321 9.3744C2.62321 9.3744 2.62321 9.3744 2.5622 9.25239C2.5012 9.13038 2.5012 9.04904 2.39952 8.9677C2.27751 8.88636 2.19617 8.68301 2.05383 8.64234C1.91148 8.60168 1.70813 8.17464 1.70813 8.17464C1.70813 8.17464 1.64713 7.97129 1.44378 7.80861C1.24043 7.64593 1.24043 7.80861 1.09809 7.97129C0.955742 8.13397 0.955742 7.97129 0.955742 7.97129C0.955742 7.97129 0.915072 8.05263 0.874402 8.11364C0.894737 7.76794 0.935407 7.42225 0.996412 7.07656L1.01675 7.05622V6.91388C1.01675 6.89354 1.01675 6.87321 1.03708 6.85287H1.2201V6.73086V6.62919V6.48684L1.15909 6.4055C1.30144 5.89713 1.50478 5.40909 1.7488 4.94139C2.37919 4.35167 3.49761 3.41627 4.37201 3.31459L4.69737 2.41986C4.69737 2.41986 4.69737 2.62321 4.81938 2.41986C4.94139 2.21651 4.69737 2.46053 4.94139 2.21651C5.18541 1.97249 5.18541 1.91148 5.34809 1.83014C5.51077 1.7488 5.57177 1.70813 5.65311 1.64713C5.73445 1.58612 6.01914 1.44378 6.01914 1.44378H6.10048L5.9378 1.62679L5.77512 1.78947L5.59211 1.95215L5.49043 2.01316L5.40909 2.19617L5.49043 2.37919C5.49043 2.37919 5.5311 2.37919 5.71412 2.35885C5.89713 2.33852 6.14115 2.33852 6.10048 2.25718C6.05981 2.17584 6.20215 2.07416 6.28349 2.03349C6.36483 1.99282 6.36483 1.99282 6.36483 1.99282L6.56818 1.89115C6.56818 1.89115 6.56818 1.89115 6.73086 1.80981C6.89354 1.72847 6.89354 1.72847 6.89354 1.72847L7.11723 1.48445H7.23923L7.40191 1.19976V1.03708V0.894737C7.72727 0.833732 8.11364 0.813397 8.47967 0.813397C8.68301 0.813397 8.9067 0.833732 9.11005 0.833732C9.17105 0.894737 9.17105 0.915072 9.17105 0.915072L9.29306 1.13876L9.49641 1.17943L9.55742 1.32177L9.43541 1.50478L9.19139 1.48445C9.19139 1.48445 9.17105 1.48445 9.04904 1.48445C8.88636 1.48445 8.70335 1.48445 8.70335 1.48445H8.5C8.5 1.48445 8.47967 1.56579 8.37799 1.62679C8.27632 1.70813 8.25598 1.60646 8.21531 1.72847C8.17464 1.85048 8.11364 2.05383 8.11364 2.05383L8.13397 2.19617L8.29665 2.29785C8.29665 2.29785 8.39833 2.29785 8.47967 2.29785C8.56101 2.29785 8.82536 2.31818 8.82536 2.31818C8.9067 2.17584 8.74402 1.91148 8.74402 1.91148H8.60168L8.72369 1.70813H8.84569H8.98804L9.15072 1.93182L9.19139 2.13517V2.33852L9.08971 2.52153L8.92703 2.60287H8.68301L8.45933 2.72488L8.19498 2.92823C8.19498 2.92823 8.19498 2.92823 8.07297 3.13158C7.95096 3.33493 7.84928 3.47727 7.84928 3.47727L7.86962 3.68062L7.91029 3.82297C7.74761 3.92464 7.99163 3.8433 7.6256 3.92464C7.32057 4.00598 7.32057 4.00598 7.32057 4.00598C7.32057 4.00598 7.2799 4.02632 7.2189 4.08732C7.17823 4.12799 7.23923 3.88397 7.17823 4.12799C7.09689 4.37201 7.03589 4.51435 7.03589 4.51435L7.23923 4.6567C7.23923 4.6567 7.07656 4.77871 7.23923 4.79904C7.40191 4.81938 7.1579 4.79904 7.40191 4.81938C7.64593 4.83971 7.86962 4.81938 7.86962 4.81938L7.99163 4.63636L8.23565 4.41268L8.39833 4.189L8.52034 4.04665L8.72369 3.94498C8.72369 3.94498 8.84569 3.82297 8.88636 3.92464C8.92703 4.02632 8.9067 4.33134 8.9067 4.33134L9.19139 4.41268H9.3134C9.3134 4.41268 9.35407 4.43301 9.43541 4.49402C9.51675 4.53469 9.65909 4.57536 9.65909 4.57536L9.76077 4.37201L9.92345 4.189C9.92345 4.189 10.0251 4.16866 10.0861 4.16866C10.1675 4.16866 10.2895 4.25 10.2895 4.25L10.5132 4.29067H11.1029L11.3469 4.189L11.4689 4.27034C11.5502 4.47368 11.5096 4.55502 11.4689 4.61603C11.4079 4.67703 11.4079 4.67703 11.4079 4.67703C11.4079 4.67703 11.3876 4.69737 11.1842 4.79904C10.9605 4.90072 10.5132 5.00239 10.4115 5.00239C10.3098 5.00239 10.3098 5.00239 10.3098 5.00239C10.3098 5.00239 10.2691 4.98206 10.0861 4.96172C9.92344 4.94139 9.61842 4.81938 9.61842 4.81938L9.35407 4.69737H9.23206H9.11005C9.11005 4.69737 8.86603 4.67703 8.72369 4.67703C8.58134 4.67703 8.5 4.7177 8.5 4.7177L8.37799 4.73804L8.0323 4.96172L7.74761 5.14474L7.60526 5.24641L7.46292 5.34809L7.34091 5.51077L6.97488 5.81579C6.87321 5.9378 6.87321 5.9378 6.87321 5.9378L6.52751 6.66986V6.87321L6.38517 6.99522V7.34091C6.38517 7.34091 6.50718 7.97129 6.38517 8.05263C6.26316 8.13397 6.38517 8.35766 6.38517 8.35766L6.32416 8.52034L6.64952 8.86603L6.97488 9.11005L7.6866 9.53708H7.80861H8.15431H8.29665C8.29665 9.53708 8.25598 9.41507 8.60168 9.35407C8.94737 9.29306 8.9677 9.3134 8.9677 9.3134L9.13038 9.27273L9.3744 9.29306L9.51675 9.3134L9.67943 9.41507L9.98445 9.53708H10.0861V9.67943V9.92345V10.2081V10.3301V10.5335L10.3301 10.7368V10.9199H10.4318L10.5742 11.2249C10.5742 11.2249 10.6148 11.4282 10.5742 11.6316C10.5335 11.8349 10.5335 11.8349 10.5335 11.8349L10.4522 12.0586C10.4522 12.0586 10.4928 12.1806 10.4725 12.2823C10.4725 12.3026 10.4725 12.323 10.4522 12.3433C10.4725 12.3026 10.5132 12.323 10.5742 12.5873C10.6962 13.0144 10.6962 13.0144 10.6962 13.0144C10.6962 13.0144 10.7165 13.116 10.6962 13.2177C10.6758 13.3194 10.5945 13.6854 10.5945 13.6854L10.6962 13.8278V13.9294H10.7978C10.7978 13.9294 10.6352 14.0108 10.7978 14.0108C10.9605 14.0108 10.9605 14.0108 10.9605 14.0108L11.1232 13.8888C11.1232 13.8888 11.1232 13.7667 11.3469 13.6651C11.5706 13.5634 11.5706 13.5634 11.5706 13.5634L11.6926 13.4617L11.8146 13.3194C11.8146 13.3194 11.9773 13.116 12.0789 13.0347C12.1806 12.9534 12.1806 12.9534 12.1806 12.9534C12.1806 12.9534 12.2213 12.933 12.384 12.75C12.5263 12.567 12.5263 12.567 12.5263 12.567V12.4653L12.7907 12.0993L12.9127 11.8756L13.055 11.3672C13.055 11.3672 13.299 10.6962 13.299 10.6148C13.299 10.5335 13.299 10.3301 13.299 10.3301L13.4414 10.1268C13.4414 10.1268 13.5227 9.55742 13.5431 9.41507C13.5634 9.29306 13.5634 9.29306 13.5634 9.29306C13.5634 9.29306 13.6041 9.33373 13.7057 8.9677C13.8074 8.60168 13.8074 8.60168 13.8074 8.60168V8.39833C13.8074 8.39833 13.7057 8.35766 13.8074 8.21531C13.9091 8.0933 13.9091 8.0933 13.9091 8.0933V7.86962L13.9294 7.52392L13.5837 7.40191L13.4211 7.25957L13.2787 7.1579L13.0754 6.93421L12.933 6.69019C12.7703 6.60885 12.9127 6.69019 12.7703 6.60885C12.628 6.52751 12.628 6.52751 12.628 6.52751C12.628 6.52751 12.3026 6.16148 12.3026 6.08014C12.3026 5.9988 12.3026 5.9988 12.3026 5.9988L12.2823 5.81579C12.2823 5.81579 12.384 5.59211 12.5263 5.81579C12.6687 6.03947 12.567 5.81579 12.6687 6.03947C12.7703 6.26316 12.5467 6.03947 12.7703 6.26316C12.994 6.48684 13.0347 6.26316 13.0347 6.26316C13.0347 6.26316 13.0754 6.18182 13.177 6.26316C13.2787 6.3445 13.4007 6.66986 13.4007 6.66986H13.5024H13.6244C13.6244 6.66986 13.6651 6.66986 13.7464 6.66986C13.8278 6.66986 13.8888 6.66986 13.8888 6.66986C13.8888 6.66986 13.8888 6.42584 13.9904 6.3445C14.0921 6.26316 14.0718 6.44617 14.0921 6.26316C14.1124 6.08014 14.2955 6.08014 14.0921 5.89713C13.8888 5.69378 13.8074 5.65311 13.7871 5.55144C13.7667 5.44976 13.7464 5.51077 13.6651 5.36842C13.5837 5.22608 13.4617 5.0634 13.3194 5.00239C13.177 4.96172 13.116 4.98206 13.055 4.88038C12.9737 4.77871 12.811 4.6567 12.811 4.6567L12.8517 4.53469H13.0144C13.0144 4.53469 13.055 4.63636 13.1364 4.67703C13.2177 4.7177 13.3397 4.86005 13.3397 4.86005C13.3397 4.86005 13.5024 4.88038 13.6651 4.88038C13.8278 4.88038 13.6447 4.96172 13.8074 4.88038C13.9701 4.79904 14.1938 4.73804 14.1938 4.73804L14.4581 4.7177L14.5598 4.53469L14.6818 4.25V4.06699C14.6818 4.06699 14.6615 3.98565 14.6411 3.88397C15.4139 4.90072 15.9222 6.12081 16.1053 7.44258C16.0646 7.54426 16.0646 7.74761 16.1663 8.13397C16.1663 8.25598 16.1663 8.35766 16.1663 8.47967C16.0646 8.60168 15.8002 8.5 15.8002 8.5L15.5156 8.9067L15.1699 9.35407V9.57775V10.3911V10.6352H14.9258V11.0419L14.6208 11.8553V12.0993V12.6687H14.8242L14.8648 12.7703C13.4617 14.8242 11.1232 16.1663 8.5 16.1663Z" fill="white"></path>
</svg>
</span>
Diễn biến dịch COVID-19 trên thế giới
</h3>
<ul class="list-world_detail">
<li>
<div class="cs_detail total">
<div class="type">
Tổng ca nhiễm
</div>
<div class="count" id="SumTotal">26,472,012</div>
<div class="status up">
<div class="icn">
<svg width="13" height="8" viewbox="0 0 13 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 0L12.5 8H0.5L6.5 0Z" fill="white"></path>
</svg>
</div>
<div class="numb" id="Last24H">
<span>12,966</span> (0.2%)
</div>
</div>
</div>
</li>
<li>
<div class="cs_detail death">
<div class="type">
Số ca tử vong
</div>
<div class="count" id="SumDead">873,229</div>
<div class="status up">
<div class="icn">
<svg width="13" height="8" viewbox="0 0 13 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 0L12.5 8H0.5L6.5 0Z" fill="white"></path>
</svg>
</div>
<div class="numb" id="Dead24H">
<span>706</span> (0.1%)
</div>
</div>
</div>
</li>
<li>
<div class="cs_detail healing">
<div class="type">
Đã bình phục
</div>
<div class="count" id="SumCured">18,664,866</div>
<div class="status up">
<div class="icn">
<svg width="13" height="8" viewbox="0 0 13 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 0L12.5 8H0.5L6.5 0Z" fill="white"></path>
</svg>
</div>
<div class="numb" id="Cured24H">
<span>94,989</span> (0.5%)
</div>
</div>
</div>
</li>
<li>
<div class="cs_detail inflection">
<div class="type">
Đang nhiễm
</div>
<div class="count" id="SumSick">6,933,917</div>
<div class="status down">
<div class="icn">
<svg width="13" height="8" viewbox="0 0 13 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 0L12.5 8H0.5L6.5 0Z" fill="white"></path>
</svg>
</div>
<div class="numb" id="Sick24H">
<span class="down">82,729</span> (1.2%)
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="vn-total">
<h3>
<span>
<svg width="20" height="20" viewbox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#DA251D"></circle>
<path d="M10 4L11.3471 8.1459H15.7063L12.1796 10.7082L13.5267 14.8541L10 12.2918L6.47329 14.8541L7.82037 10.7082L4.29366 8.1459H8.65292L10 4Z" fill="#FFFF00"></path>
</svg>
</span>
Diễn biến dịch tại Việt Nam
</h3>
<div class="total-detail_vn">
<div class="heading">
<div class="type">
<div class="txt">
Ca nhiễm
</div>
<div class="numb" id="vieNhiem">1044</div>
</div>
<div class="type">
<div class="txt">
Tử vong
</div>
<div class="numb" id="vieTuVong">34</div>
</div>
<div class="type healing">
<div class="txt">
Bình phục
</div>
<div class="numb" id="vieBinhPhuc">712</div>
</div>
<div class="type inflection">
<div class="txt">
Đang nhiễm
</div>
<div class="numb" id="vieDangNhiem">332</div>
</div>
</div>
<div class="total-vn">
<div class="statics">
<div class="txt">
Nghi nhiễm đã xác nhận âm tính
</div>
<div class="numb" id="vieNghiAm">121.563</div>
</div>
<div class="statics">
<div class="txt">
Nghi nhiễm đang được cách ly
theo dõi
</div>
<div class="numb" id="vieNghiCachLy">2.266</div>
</div>
<div class="statics">
<div class="txt">
Có tiếp xúc với người nghi nhiễm
bệnh
</div>
<div class="numb" id="vieNghiTiepXuc">72.508</div>
</div>
<div class="statics">
<div class="txt">
Tỉnh thành có người nhiễm
</div>
<div class="numb" id="countCity">42</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var coronaVirus = { key: "9478250c530b2d80ab5f3aa913c88352", init: function () { this.getCoronaVirus("#loadlistDataWorld") }, getCoronaVirus: function (a) { $.ajax({ type: "GET", url: Constants.apiHandlerUrl + "/coronavirus/k/" + this.key + ".chn", dataType: "json", success: function (m) { if (console.log(m), null != m) { var n = m.Data; if (null != n) { if (null != n.Summary && ($("#SumTotal").html(n.Summary.Total), $("#SumDead").html(n.Summary.Dead), $("#SumCured").html(n.Summary.Cured), $("#SumSick").html(n.Summary.DangNhiem), void 0 !== n.Summary.NhiemHomNay_PhanTram && (n.Summary.NhiemHomNay_PhanTram = "(" + n.Summary.NhiemHomNay_PhanTram + ")"), void 0 !== n.Summary.TuVongHomNay_PhanTram && (n.Summary.TuVongHomNay_PhanTram = "(" + n.Summary.TuVongHomNay_PhanTram + ")"), void 0 !== n.Summary.HoiPhucHomNay_PhanTram && (n.Summary.HoiPhucHomNay_PhanTram = "(" + n.Summary.HoiPhucHomNay_PhanTram + ")"), void 0 !== n.Summary.DangNhiemHomNay_PhanTram && (n.Summary.DangNhiemHomNay_PhanTram = "(" + n.Summary.DangNhiemHomNay_PhanTram + ")"), "" != n.Summary.NhiemHomNay && (parseInt(n.Summary.NhiemHomNay) > 0 ? ($("#Last24H").html("
<span>" + n.Summary.NhiemHomNay + "</span> " + n.Summary.NhiemHomNay_PhanTram), $("#Last24H").parent(".status").addClass("up")) : (n.Summary.NhiemHomNay = n.Summary.NhiemHomNay.replace("-", ""), n.Summary.HoiPhucHomNay_PhanTram = n.Summary.NhiemHomNay_PhanTram.replace("-", ""), $("#Last24H").html('
<span class="down">' + n.Summary.NhiemHomNay + "</span> " + n.Summary.NhiemHomNay_PhanTram), $("#Last24H").parent(".status").addClass("down"))), "" != n.Summary.TuVongHomNay && (parseInt(n.Summary.TuVongHomNay) > 0 ? ($("#Dead24H").html("
<span>" + n.Summary.TuVongHomNay + "</span> " + n.Summary.TuVongHomNay_PhanTram), $("#Dead24H").parent(".status").addClass("up")) : (n.Summary.TuVongHomNay = n.Summary.TuVongHomNay.replace("-", ""), n.Summary.TuVongHomNay_PhanTram = n.Summary.TuVongHomNay_PhanTram.replace("-", ""), $("#Dead24H").html('
<span class="down">' + n.Summary.TuVongHomNay + "</span> " + n.Summary.TuVongHomNay_PhanTram), $("#Dead24H").parent(".status").addClass("down"))), "" != n.Summary.HoiPhucHomNay && (parseInt(n.Summary.HoiPhucHomNay) > 0 ? ($("#Cured24H").html("
<span>" + n.Summary.HoiPhucHomNay + "</span> " + n.Summary.HoiPhucHomNay_PhanTram), $("#Cured24H").parent(".status").addClass("up")) : (n.Summary.HoiPhucHomNay = n.Summary.HoiPhucHomNay.replace("-", ""), n.Summary.HoiPhucHomNay_PhanTram = n.Summary.HoiPhucHomNay_PhanTram.replace("-", ""), $("#Cured24H").html('
<span class="down">' + n.Summary.HoiPhucHomNay + "</span> " + n.Summary.HoiPhucHomNay_PhanTram), $("#Cured24H").parent(".status").addClass("down"))), "" != n.Summary.DangNhiemHomNay && (parseInt(n.Summary.DangNhiemHomNay) > 0 ? ($("#Sick24H").html("
<span>" + n.Summary.DangNhiemHomNay + "</span> " + n.Summary.DangNhiemHomNay_PhanTram), $("#Sick24H").parent(".status").addClass("up")) : (n.Summary.DangNhiemHomNay = n.Summary.DangNhiemHomNay.replace("-", ""), n.Summary.DangNhiemHomNay_PhanTram = n.Summary.DangNhiemHomNay_PhanTram.replace("-", ""), $("#Sick24H").html('
<span class="down">' + n.Summary.DangNhiemHomNay + "</span> " + n.Summary.DangNhiemHomNay_PhanTram), $("#Sick24H").parent(".status").addClass("down")))), null != n.ListProvinceVietNam && n.ListProvinceVietNam.length > 0 && $("#countCity").html(n.ListProvinceVietNam.length), null != n.ThongKeVietNam_TuDong) { var e = parseInt(n.ThongKeVietNam_TuDong.SoCaNhiem) - parseInt(n.ThongKeVietNam_TuDong.BinhPhuc); $("#vieNhiem").html(n.ThongKeVietNam_TuDong.SoCaNhiem), $("#vieTuVong").html(n.ThongKeVietNam_TuDong.TuVong), $("#vieBinhPhuc").html(n.ThongKeVietNam_TuDong.BinhPhuc), $("#vieDangNhiem").html(e) } if (null != n.ThongKeThem_VietNam) { var o = n.ThongKeThem_VietNam; $("#vieNghiAm").html(o.NghiNhiemDaXacNhanAmTinh), $("#vieNghiCachLy").html(o.NghiNhiemDangDuocCachLyTheoDoi), $("#vieNghiTiepXuc").html(o.CoTiepXucVoiNguoiNghiNgoNhiemBenh), $("#vieCachLyTaiNha").html(o.CachLyTaiNhaVaNoiLuuTru) } var u = GetDateOfWeekFullTimeDate(n.PostDateTimeSpan); $("#PostDateTimeSpan").text("Cập nhật lần cuối lúc: " + u) } else $(a).html('
<li class="loading">Chưa cập nhật dữ liệu</li>') } } }) } }; function GetDateOfWeekFullTimeDate(a) { try { var m = new Date(a), n = m.getUTCDate(), e = m.getUTCMonth() + 1, o = m.getFullYear(), u = m.getUTCHours(), r = m.getUTCMinutes(), h = m.getUTCSeconds(); return u < 10 && (u = "0" + u), e < 10 && (e = "0" + e), h < 10 && (h = "0" + h), n < 10 && (n = "0" + n), r < 10 && (r = "0" + r), u + ":" + r + ":" + h + " ngày " + n + "/" + e + "/" + o } catch (a) { console.log(a) } } $(function () { coronaVirus.init() });
</script>
<style>
.flx-trendAd-crsk14 {
display: flex;
justify-content: space-between;
}
.crsk14 {
width: 320px !important;
}
.crsk14 .corona_shield-k14 {
width: 320px;
background: #333;
border: 1px solid #111;
box-sizing: border-box;
border-radius: 4px;
}
.crsk14 .corona_shield-k14 .heading_csk14 {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
background: #222;
padding-left: 15px;
}
.crsk14 .corona_shield-k14 .heading_csk14 .logo-left {
display: flex;
align-items: center;
}
.crsk14 .corona_shield-k14 .heading_csk14 .logo-left .icn {
width: 20px;
margin-right: 7px;
}
.crsk14 .corona_shield-k14 .heading_csk14 .logo-left .icn img {
width: 100%;
display: block;
}
.crsk14 .corona_shield-k14 .heading_csk14 .logo-left .txt {
font-size: 14px;
line-height: 26px;
font-family: Roboto, sans-serif;
color: #fff;
}
.crsk14 .corona_shield-k14 .heading_csk14 .logo-right a {
display: block;
}
.crsk14 .corona_shield-k14 .content-csk14 {
padding: 14px;
}
.crsk14 .corona_shield-k14 .content-csk14 .world-total {
padding-bottom: 20px;
border-bottom: 1px dashed rgba(255,255,255,.1);
margin-bottom: 20px;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn {
background: #fff;
padding: 12px;
border: 1px solid #e5e5e5;
box-sizing: border-box;
box-shadow: 0 5px 10px rgba(0,0,0,.05);
border-radius: 4px;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .heading {
padding-bottom: 10px;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .heading .type {
display: block;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .heading .type.healing .numb {
color: #1eb2a6;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .heading .type.inflection .numb {
color: #f64b3c;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .heading .type .txt {
font-family: Roboto, sans-serif;
font-size: 13px;
line-height: 16px;
color: #888;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .heading .type .numb {
font-family: Roboto, sans-serif;
font-size: 30px;
line-height: 36px;
color: #111;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .total-vn .statics {
display: flex;
justify-content: space-between;
align-items: center;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .total-vn .statics+.statics {
margin-top: 11px;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .total-vn .statics .txt {
font-family: Roboto, sans-serif;
font-size: 13px;
line-height: 16px;
color: #888;
}
.crsk14 .corona_shield-k14 .content-csk14 .total-detail_vn .total-vn .statics .numb {
font-size: 13px;
line-height: 16px;
text-align: right;
font-family: Roboto, sans-serif;
color: #333;
}
.crsk14 .corona_shield-k14 .content-csk14 h4 {
font-family: Roboto, sans-serif;
font-size: 13px;
line-height: 13px;
margin-bottom: 16px;
color: #fff;
opacity: .3;
}
.crsk14 .corona_shield-k14 .content-csk14 h3 {
display: flex;
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 19px;
color: #fff;
margin-bottom: 14px;
}
.crsk14 .corona_shield-k14 .content-csk14 h3 span {
margin-right: 8px;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li {
width: 140px;
background: rgba(255,255,255,.05);
box-shadow: 0 5px 10px rgba(0,0,0,.05);
border-radius: 4px;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li:nth-child(1),.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li:nth-child(2) {
margin-bottom: 12px;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail {
padding: 10px 14px 12px;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail.healing .count {
color: #1eb2a6;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail.healing .status .icn svg path {
fill: #1eb2a6;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail.healing .status .numb {
color: #1eb2a6;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail.inflection .count {
color: #f64b3c;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail.inflection .status .icn svg path {
fill: #f64b3c;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail.inflection .status .numb {
color: #f64b3c;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail .type {
font-family: Roboto, sans-serif;
font-size: 13px;
line-height: 16px;
color: #fff;
opacity: .5;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail .count {
font-family: Roboto, sans-serif;
font-size: 20px;
line-height: 36px;
color: #fff;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail .status {
display: flex;
align-items: center;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail .status.down .icn {
transform: rotate(180deg);
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail .status .icn {
margin-right: 5px;
}
.crsk14 .corona_shield-k14 .content-csk14 .list-world_detail li .cs_detail .status .numb {
font-size: 11px;
line-height: 16px;
font-family: Roboto, sans-serif;
color: #fff;
}
</style>
Widget 5
Sau đây mình sẽ chia sẻ các bạn về trang web chuyên chia sẻ plugin cập nhật tình hình covid-19 hoàn toàn miễn phí.
Lời kết
Với widget đầu tiên, các bạn có thể lấy code về và nghiên cứu code để học thêm về javascript, với code rất dễ hiểu và gọn gàng.
Mong bài viết có ích với bạn. Chúc các bạn thành công.
By Hiếu Quốc.
2 comments
Email: quochieuu@gmail.com
Facebook: fb.com/hieuqdev
CV: cv.quochieu.com
À thế à :v
ReplyDeleteThế đấy :v
Delete