网站博客添加新型冠状病毒疫情实时数据显示

[HTML/PHP]网站博客添加新型冠状病毒疫情实时数据显示-第1张

添加方法

复制下方代码到你的主题文件放置在你需要显示的地方（注意主题的 <?php ?>标签）。然后自行调整 css 样式。

?>
<div class="row row-sm" style="position: relative;">
    <div class="col-12">
        <div class="card" style="color:#fff;background-color:#61adff">
            <div class="card-body py-2">
                <div class="d-flex flex-fill text-sm">
                    <span>新型冠状病毒数据</span>
                    <div class="flex-fill"></div>
                    <div>截至 <span id="updateTime">0000-00-00 00:00:00</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card" style="color:#fff;background-color:#FF464D">
            <div class="card-body py-3">
                <div class="d-flex flex-fill text-md mb-4">
                    <span>确诊</span>
                    <div class="flex-fill"></div>
                    <span class="text-sm">较昨日：<span id="confirmedIncr">00</span></span>
                </div>
                <h1 id="confirmedCount" class="h2 m-0">000</h1>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card" style="color:#fff;background-color:#FFA746">
            <div class="card-body py-3">
                <div class="d-flex flex-fill text-md mb-4">
                    <span>疑似</span>
                    <div class="flex-fill"></div>
                    <span class="text-sm">较昨日：<span id="suspectedIncr">00</span></span>
                </div>
                <h1 id="suspectedCount" class="h2 m-0">000</h1>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card" style="color:#fff;background-color:#67727d">
            <div class="card-body py-3">
                <div class="d-flex flex-fill text-md mb-4">
                    <span>死亡</span>
                    <div class="flex-fill"></div>
                    <span class="text-sm">较昨日：<span id="deadIncr">00</span></span>
                </div>
                <h1 id="deadCount" class="h2 m-0">000</h1>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card" style="color:#fff;background-color:#02B88C">
            <div class="card-body py-3">
                <div class="d-flex flex-fill text-md mb-4">
                    <span>治愈</span>
                    <div class="flex-fill"></div>
                    <span class="text-sm">较昨日：<span id="curedIncr">00</span></span>
                </div>
                <h1 id="curedCount" class="h2 m-0">000</h1>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 d-none d-md-block">
        <div class="card" style="">
            <div class="card-body py-3">
                <h1 class="h5 mb-3">病毒资料</h1>
                <div class="overflow-auto" style="height:100px">
                <div id="bd_note">
                    <div class="text-sm mb-2"><i class="iconfont icon-point mr-2"></i><span id="note1"></span></div>
                    <div class="text-sm mb-2"><i class="iconfont icon-point mr-2"></i><span id="note2"></span></div>
                    <div class="text-sm mb-2"><i class="iconfont icon-point mr-2"></i><span id="note3"></span></div>
                </div>
                </div>
                <div class="d-flex flex-fill text-xs text-muted pt-2 mb-n2">
                    <span>数据来源：<a href= "https://ncov.dxy.cn/ncovh5/view/pneumonia" target="_blank" rel='external nofollow' style="color:#6c757d">丁香园</a></span>
                    <div class="flex-fill"></div>
                    <span><a href= "https://lab.isaaclin.cn/nCoV/" target="_blank" rel='external nofollow' style="color:#6c757d">API</a></span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="card" style="">
            <div class="card-body py-3">
                <h1 class="h5 mb-3">疫情资讯</h1>
                <div class="overflow-auto" style="height:100px">
                    <div id="bd_news">
                    </div>
                </div>
                <div class="d-flex flex-fill text-xs text-muted pt-2 mb-n2">
                    <span>数据来源：<a href= "https://ncov.dxy.cn/ncovh5/view/pneumonia" target="_blank" rel='external nofollow' style="color:#6c757d">丁香园</a></span>
                    <div class="flex-fill"></div>
                    <span><a href= "https://lab.isaaclin.cn/nCoV/" target="_blank" rel='external nofollow' style="color:#6c757d">API</a></span>
                </div>
            </div>
        </div>
    </div>
    <div id="bd-loading" class="ajax-loading text-center rounded" style="position:absolute;display:flex;width:100%;top:-1rem;bottom:.5rem;background:rgba(125,125,125,.5)"><div id="bd-success" class="col align-self-center"><i class="iconfont icon-loading icon-spin icon-2x"></i></div></div>
</div>
<script>
    let url = "https://lab.isaaclin.cn/nCoV/api/overall";
    let newsurl = "https://lab.isaaclin.cn/nCoV/api/news";

    $.getJSON(url,function(data,status){
        let res = data["results"][0];
        $("#confirmedCount").text(res["confirmedCount"]);
        $("#confirmedIncr").text(res["confirmedIncr"] ? res["confirmedIncr"] : '待更新'); 
        $("#suspectedCount").text(res["suspectedCount"]);
        $("#suspectedIncr").text(res["suspectedIncr"] ? res["suspectedIncr"] : '待更新'); 
        $("#curedCount").text(res["curedCount"]);
        $("#curedIncr").text(res["curedIncr"] ? res["curedIncr"] : '待更新'); 
        $("#deadCount").text(res["deadCount"]);
        $("#deadIncr").text(res["deadIncr"] ? res["deadIncr"] : '待更新'); 
        $("#note1").text(res["note1"]); 
        $("#note2").text(res["note2"]); 
        $("#note3").text(res["note3"]); 
        $("#updateTime").text(timestampToTime(res["updateTime"],1)); 
        $("#bd-loading").hide();
    }).fail(function () {
        $("#bd-success").html('被api服务器屏蔽，请稍后再试，说明：<a href= "https://lab.isaaclin.cn/nCoV/" rel="external nofollow" target="_blank">API</a>'); 
    });
    $.getJSON(newsurl,function(data,status){
        let res = data["results"][0];
        let html = '';
        for(let item of data['results']) {
            html += '<div class="text-sm mb-2">'+timestampToTime(item['pubDate'],1,true)+'<a class="ml-2" href="'+item['sourceUrl']+'" target="_blank" rel="external nofollow">'+item['title']+'</a></div>';
        }
        
        $("#bd_news").html(html);
    }).fail(function () {
        $("#bd-success").html('被api服务器屏蔽，请稍后再试，说明：<a href= "https://lab.isaaclin.cn/nCoV/" rel="external nofollow" target="_blank">API</a>'); 
    });
    function timestampToTime(timestamp,s,time = false) {
        var date = new Date(timestamp * s);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours();
        m = ':' + (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes());
        s = ':' + (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
        if(time)
            return h+m;
        else
            return Y+M+D+h+m+s;
    }
</script>
<?php

注意

上方讯息列表的图标 <i class="iconfont icon-point mr-2"></i> 请根据自己的主题重新设置

API作者的使用说明

致科研人员和API使用者
1. 本项目完全出于公益目的，API无偿开放给非商业目的人士使用，如果未来用作商业目的或产生任何不必要的版权纠纷，本项目不负任何责任；
2. 本项目仅获取丁香园的疫情数据并将其储存为时间序列，数据所有权为丁香园，本人无法授权任何个人或团体在科研或商业项目中使用本数据，如有需要，希望您能够联系丁香园并取得许可；
3. 如果您对API的使用不熟悉，单纯需要数据作为科研用途，可以移步数据仓库，直接下载便于统计/数据分析软件使用的csv文件；
4. 任何关于本项目的变化均会在项目GitHub主页进行通知，如有任何疑问，请优先查看GitHub主页，若无法找到满意的答案，可以直接在GitHub发Issue共同讨论，否则相同的问题我每天需要在邮件中重复回答数次；
5. 如果对数据获取有任何困难，欢迎您与我取得联系，可以在我的GitHub个人主页中找到我的联系方式；
6. 首次获取数据时间迟于丁香园数据记录时间，因此Area API的首条数据更新时间存在系统性误差，但能够保证后续数据的更新时间与丁香园的数据更新时间误差保持在1分钟以内；
7. 于2019年1月30日17:15起，统计API总使用次数，并不针对单个IP使用频率进行统计；
8. 目前发现浙江省/湖北省部分时间序列数据存在数据异常，可能是丁香园人工录入数据错误，本项目爬虫仅从丁香园公开的数据中获取并储存数据，并不会对异常值进行判断和处理，因此如果将本数据用作科研目的，请自己对数据进行清洗。同时，欢迎各位移步此处反馈潜在的异常数据，我会定期检查并处理。

更新

原 api 地址因服务器原理问题，获取数据可能缓慢，可以使用一为反代作者的GitHub数据库仓库地址替换上方代码中100行和101行的 url地址（下方）。仓库地址

let url = "https://i.iowen.cn/BlankerL/DXY-COVID-19-Data/master/json/DXYOverall.json";
let newsurl = "https://i.iowen.cn/BlankerL/DXY-COVID-19-Data/master/json/DXYNews.json";

注意：GitHub数据库仓库有1个小时左右的数据延时，但获取速度稳定。

2020/02/13 如果“较昨日”的数据显示为00，是因为相关数还没公布，请等待公布。

上方代码更新了提示方法，增加了新闻列表。

声明：本站文章原创有部分资源来源于网络，如无特殊说明或标注。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系 admin@liitk.com 进行删除处理！。

网站博客添加新型冠状病毒疫情实时数据显示

添加方法

注意

API作者的使用说明

更新

评论(0)

提示：请文明发言取消回复

作者信息

猜你喜欢

搭建自用随机图片API，并隐藏真实图片地址

网站添加恋爱天数小工具代码共两款样式

WordPress页面美化简单的添加会员介绍独立页面教程

TimThumb超好用的PHP略缩图裁剪器插件 v2.8.14

网站博客添加新型冠状病毒疫情实时数据显示

添加方法

注意

API作者的使用说明

更新

评论(0)

提示：请文明发言 取消回复

相关文章

作者信息

猜你喜欢

提示：请文明发言取消回复