master

分支 (1)

管理

管理

master

server_time_and_weather
/
index.html

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>vaemc</title>
    <style type="text/css">
        * {
            font-family: "Microsoft YaHei";
        }
        #vaemc {
            /* background: url('./images/background.png') no-repeat; */
            width: 523px;
            position: relative;
            color: red;
            border: 2px solid;
            box-sizing: border-box;
            height: 103px;
            border-radius: 6px;
            padding-left: 80px;
        }


        #vaemc div {
            float: left;
            font-size: 20px;
            font-family: '微软雅黑';
            position: relative;
            font-weight: 800;
        }
        div#address{
            position: absolute;
            line-height: 103px;
            width: 80px;
            text-align: center;
            left: 0;
            top: 0;
        }

        div#year-mon-day {
            top: 10px;
            left: 12px;
        }

        div#intro {
            left: 34px;
            top: 11px;
        }

        div#time {
            margin-left: 24px;
            top: 2px;
        }

        #vaemc p {
            padding-top: 28px;
        }

        div#weather{
            width: 50px;
            position: relative;
            left: 53px;
        }

        div#weather img{
            width: 100%;
        }

        div#week {
            left: 14px;
            top: 1px;
        }

        div#pm2_5 {
            left: 22px;
            top: 2px;
        }

        div#judge {
            left: 50px;
            top: -6px;
            background-color: antiquewhite;
            padding: 5px;
            border-radius: 4px;
        }
    </style>
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="vaemc">
        <div id="address" v-text='address'>**beij市</div>
        <div id="year-mon-day" class="b"><span v-text='year'>****</span> / <span v-text='mon'>**</span> / <span v-text='day'>**</span> / </div>
        <div id="intro"><span v-text='weather'>**</span>,<span v-text='winddirect'>**</span><span style="margin-left: 19px;" v-text='temp'>**</span>℃</div>
        <div id="weather"><img :src="weatherImg" alt=""></div>
        <p></p>
        <div id="week" class="b"><span v-text='week'>**</span></div>
        <div id="time" class="b"><span v-text='time'>**</span></div>
        <div id="pm2_5">PM2.5指数:&nbsp;&nbsp;<span v-text='ipm2_5'>**</span></div>
        <div id="judge" v-text='judge'>*良</div>
    </div>

    <!--
    <script>
        window.onload = function showLeftTime() {


            var myDate = new Date();
            var h = myDate.getHours();
            var min = myDate.getMinutes();
            var year = myDate.getFullYear();
            var month = myDate.getMonth();
            var day = myDate.getDate();
            var week = myDate.getDay();
            var s = myDate.getSeconds();
            month = month + 1;

            if (week == 0) {
                week = "日";
            }
            if (week == 1) {
                week = "一";
            }
            if (week == 2) {
                week = "二";
            }
            if (week == 3) {
                week = "三";
            }
            if (week == 4) {
                week = "四";
            }
            if (week == 5) {
                week = "五";
            }
            if (week == 6) {
                week = "六";
            }
            if (h.toString().length == 1) {
                h = "0" + h;
            }

            if (min.toString().length == 1) {
                min = "0" + min;
            }

            document.getElementById("h").innerHTML = h + ":" + min;


            document.getElementById("month").innerHTML = year + "年" + month + "月" + day + "日";
            document.getElementById("week").innerHTML = "星期" + week;
            document.getElementById("s").innerHTML = s;
            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) { return pair[1]; }
                }
                return (false);
            }

            var fontcolor = getQueryVariable("fontcolor");
            var div = document.getElementById('vaemc').style.color = "#" + fontcolor;

            var backcolor = getQueryVariable("backcolor");
            document.getElementById('vaemc').style.background = "#" + backcolor;


            var timeID = setTimeout(showLeftTime, 1000);


        }
    </script>
    <script>
        var CalendarData = new Array(20);
        var madd = new Array(12);
        var TheDate = new Date();
        var tgString = " ";
        var dzString = " ";
        var numString = "一二三四五六七八九十";
        var monString = "正二三四五六七八九十冬腊";
        var weekString = " ";
        var sx = " ";
        var cYear;
        var cMonth;
        var cDay;
        var cHour;
        var cDateString;
        var DateString;
        var Browser = navigator.appName;

        function init() {
            CalendarData[0] = 0x41A95;
            CalendarData[1] = 0xD4A;
            CalendarData[2] = 0xDA5;
            CalendarData[3] = 0x20B55;
            CalendarData[4] = 0x56A;
            CalendarData[5] = 0x7155B;
            CalendarData[6] = 0x25D;
            CalendarData[7] = 0x92D;
            CalendarData[8] = 0x5192B;
            CalendarData[9] = 0xA95;
            CalendarData[10] = 0xB4A;
            CalendarData[11] = 0x416AA;
            CalendarData[12] = 0xAD5;
            CalendarData[13] = 0x90AB5;
            CalendarData[14] = 0x4BA;
            CalendarData[15] = 0xA5B;
            CalendarData[16] = 0x60A57;
            CalendarData[17] = 0x52B;
            CalendarData[18] = 0xA93;
            CalendarData[19] = 0x40E95;
            madd[0] = 0;
            madd[1] = 31;
            madd[2] = 59;
            madd[3] = 90;
            madd[4] = 120;
            madd[5] = 151;
            madd[6] = 181;
            madd[7] = 212;
            madd[8] = 243;
            madd[9] = 273;
            madd[10] = 304;
            madd[11] = 334;
        }

        function GetBit(m, n) {
            return (m >> n) & 1;
        }

        function e2c() {
            var total, m, n, k;
            var isEnd = false;
            var tmp = TheDate.getYear();
            if (tmp < 1900) tmp += 1900;
            total = (tmp - 2001) * 365
                + Math.floor((tmp - 2001) / 4)
                + madd[TheDate.getMonth()]
                + TheDate.getDate()
                - 23;
            if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1)
                total++;
            for (m = 0; ; m++) {
                k = (CalendarData[m] < 0xfff) ? 11 : 12;
                for (n = k; n >= 0; n--) {
                    if (total <= 29 + GetBit(CalendarData[m], n)) {
                        isEnd = true;
                        break;
                    }
                    total = total - 29 - GetBit(CalendarData[m], n);
                }
                if (isEnd) break;
            }
            cYear = 2001 + m;
            cMonth = k - n + 1;
            cDay = total;
            if (k == 12) {
                if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1)
                    cMonth = 1 - cMonth;
                if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1)
                    cMonth--;
            }
            cHour = Math.floor((TheDate.getHours() + 3) / 2);
        }

        function GetcDateString() {
            var tmp = "";
            tmp += tgString.charAt((cYear - 4) % 10); //年干
            tmp += dzString.charAt((cYear - 4) % 12); //年支
            tmp += " ";
            tmp += sx.charAt((cYear - 4) % 12);
            tmp += "  ";
            if (cMonth < 1) {
                tmp += "闰";
                tmp += monString.charAt(-cMonth - 1);
            }
            else
                tmp += monString.charAt(cMonth - 1);
            tmp += "月";
            tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "卅"));
            if (cDay % 10 != 0 || cDay == 10)
                tmp += numString.charAt((cDay - 1) % 10);
            tmp += " ";
            if (cHour == 13) tmp += "夜";
            tmp += dzString.charAt((cHour - 1) % 12);
            tmp += " ";
            cDateString = tmp;
            return "";
        }

        function GetDateString() {
            var tmp = "";
            var t1 = TheDate.getYear();
            if (t1 < 1900) t1 += 1900;
            tmp += t1
                + "年"
                + (TheDate.getMonth() + 1) + "月"
                + TheDate.getDate() + "日 "
                //+TheDate.getHours()+":"
                //+((TheDate.getMinutes()<10)?"0":"")
                //+TheDate.getMinutes()
                + " 星期" + weekString.charAt(TheDate.getDay());
            DateString = tmp;
            return "";
        }

        init();
        e2c();
        GetDateString();
        GetcDateString();
        document.getElementById("n").innerHTML = "农历:" + cDateString;
    </script> -->
    <script>
        var oPage = new Vue({
            el: '#vaemc',
            data: function () {
                return {
                    visible: false,
                    address: '',

                    year: '',
                    mon: '',
                    day: '',
                    weather: '',
                    time: '',
                    weatherImg : './weathercn/0.png' ,
                    winddirect: '',
                    ipm2_5: '',
                    judge: '',
                    week: '',
                    temp: '',
                }
            }
        })

        function findWeather() {
            var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js';
            $.getScript(cityUrl, function (script, textStatus, jqXHR) {
                var citytq = remote_ip_info.city;// 获取当前城市（'北京'，'上海'等市级字符串）
                var url = "http://jisutqybmf.market.alicloudapi.com/weather/query?city=" + citytq;
                var pushData = {                };
                oPage.address= citytq;
                $.ajax({
                    type: "GET",
                    url: url,
                    data: pushData,
                    beforeSend: function (XMLHttpRequest) {
                        // XMLHttpRequest.setRequestHeader("X-Ca-Timestamp", "1522324391257");
                        // XMLHttpRequest.setRequestHeader("X-Ca-Request-Mode", "debug");
                        XMLHttpRequest.setRequestHeader("X-Ca-Key", "24836705");
                        // XMLHttpRequest.setRequestHeader("X-Ca-Stage", "RELEASE");
                        // XMLHttpRequest.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                        XMLHttpRequest.setRequestHeader("Authorization", "APPCODE 2080cf555ecb43c188f01f5010dc9d70");
                    },
                    success(response) {
                        var resp = JSON.parse(response)
                        var updatetime = resp.result.updatetime;
                        var first_time = resp.result.updatetime.split(' ')[0]
                        var last_time = resp.result.updatetime.split(' ')[1]
                        console.log(
                            resp,
                            first_time,
                            last_time,
                            typeof resp
                        )
                        oPage.year = first_time.split('-')[0]
                        oPage.mon = first_time.split('-')[1]
                        oPage.day = first_time.split('-')[2]

                        oPage.time = getNowFormatDate().split(' ')[1];
                        setInterval(function() {
                            oPage.time = getNowFormatDate().split(' ')[1];
                        }, 1000);
                        oPage.weather = resp.result.weather;
                        oPage.winddirect = resp.result.winddirect;
                        oPage.weatherImg = './weathercn/'+ resp.result.img +'.png';

                        oPage.week = resp.result.week;
                        oPage.ipm2_5 = resp.result.aqi.ipm2_5;
                        oPage.temp = resp.result.temp;

                        if(+resp.result.aqi.ipm2_5 >= 250){
                            oPage.judge = '严重污染'
                        }else if(+resp.result.aqi.ipm2_5 >= 150 && resp.result.aqi.ipm2_5 < 250){
                            oPage.judge = '重度污染'
                        }else if(+resp.result.aqi.ipm2_5 >= 115 && resp.result.aqi.ipm2_5 < 150){
                            oPage.judge = '中度污染'
                        }else if(+resp.result.aqi.ipm2_5 >= 75 && resp.result.aqi.ipm2_5 < 115){
                            oPage.judge = '轻度污染'
                        }else if(+resp.result.aqi.ipm2_5 >= 35 && resp.result.aqi.ipm2_5 < 75){
                            oPage.judge = '良'
                        }else if(+resp.result.aqi.ipm2_5 >= 0 && resp.result.aqi.ipm2_5 < 35){
                            oPage.judge = '优'
                        }
                    },
                    error(response) {

                    }
                });
            });
        }
        findWeather()


function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
	var seperator2 = ":";
	var month = date.getMonth() + 1;
	var strDate = date.getDate();
	// if (month >= 1 && month <= 9) {
	//     month = "0" + month;
	// }
	// if (strDate >= 0 && strDate <= 9) {
	//     strDate = "0" + strDate;
	// }
	var currentdate = date.getFullYear() + seperator1 + addZero(month) + seperator1 + addZero(strDate)
        + " " + addZero(date.getHours()) + seperator2 + addZero(date.getMinutes())
            + seperator2 + addZero(date.getSeconds());
    return currentdate;
}

/**
 * 小于10自动补零, 小于十
 * =====================================================
 * 如: 数字"1" 转为字符串 "01"
 */
 function addZero(s) {
	var _s = Number(s);
    return _s < 10 ? '0' + _s : _s;
}
    </script>

</body>

</html>