自动获取位置给予天气预报数据和视图（高德，vue可用）

最新分享News<li><i class="el-cloud"></i>天气预报<iframe id="tianqi" scrolling="no" frameborder="0" allowtransparency="true"...

托尼沙滩裤

5810人浏览 · 2019-10-04 18:47:44

托尼沙滩裤 · 2019-10-04 18:47:44 发布

----------填充json格式（vue,高德地图可用）----------------------
实时最新数据网站（数据来源与彩云天气）https://api.caiyunapp.com/v2/qdtgU5C6Bhvmmxoa/116.4009,39.9033/forecast.jsonp?callback=?
116.4009，39.9033为当前获取数据的经纬度
可以通过高德开发者工具来找到自己需要的经纬度

最新分享 News

        <li><i class="el-cloud"></i>天气预报
            <iframe id="tianqi" scrolling="no" frameborder="0" allowtransparency="true"
                    src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280"></iframe>
        </li>

        <li><i class="el-calendar"></i>历史今天：
            <iframe src="http://www.todayonhistory.com/code/6.html?w=250&h=20&bky=dotted&bks=0&fs=14&fc=#565656&hg=14&ie=0&xhx=none&sd=300&px=3&len=0&sk=1&n=0"
                    width="250" height="15" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
        </li>
    </ul>
</div>

完整的网页引用：可以使用iframe来调用到他网页中

<html   ><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>天气预报代码调用</title>
    <!--[if IE 6]>
    <script type="text/javascript" mce_src="DD_belatedPNG.js" src="//static.tianqistatic.com/static/js/DD_belatedPNG.js"></script>
    <script type="text/javascript">DD_belatedPNG.fix(".pngtqico");</script>
    <![endif]-->
    <script type="text/javascript" src="../../static/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        var color = bgcolor = bdcolor = site = icon = "";
        var num = 0;
        $(document).ready(function(){
            init();
            if (typeof(bgcolor) != 'undefined' && bgcolor != '') {
                $("#mobile280").css('background-color', bgcolor);
            }
            if (typeof(bdcolor) != 'undefined' && bdcolor != '') {
                $("#mobile280").css('border', '1px solid ' + bdcolor);
            }
            if (typeof(color) != 'undefined' && color != '') {
                $("#mobile280").css('color', color);
                $("#mobile280 a").css('color', color);
                $("#mobile280 .f1").css('color', color);
                $("#mobile280 .wtpic font").attr("color","");
            }
            if (typeof(temp) != 'undefined' && temp == 0) {
                $("div.wt2").remove();
            }
        });
        
        function init(){
            if(num==0) num=5;
            for (var i=5; i > num; i--) {
                $("#day_"+i).remove();
            }
            if (typeof(icon) != 'undefined' && icon != '') {
                $("img.pngtqico").each(function(i){
                    this.src = this.src.replace("tianqibig", icon);
                });
            }
        }

    </script>
    <style type="text/css">
        body{margin:0;padding:0;font-size:12px; font-family:"微软雅黑"}
        body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, fieldset, textarea, th, td{ margin: 0;padding: 0;}
        em{font-size: 12px;font-weight: normal;font-style: normal;}
        ul{list-style-type:none;margin:0;padding:0;}
        li{list-style-type:none;margin:0;padding:0;}
        img{border:0;}
        a:link,a:visited,a:hover,a:active{color:#333;text-decoration:none;}
        a:hover{color:#333;text-decoration:none;}
        .box{ float:left; width:288px; height:25px; line-height:25px; overflow:hidden;}
        .box strong{float:left; font-size:12px; padding:0 6px 0 0;}
        .box .wtpic{height:22px;width:22px;float:left; padding:0 6px 0 0;}
        .box .wtline{float:left; height:25px; line-height:25px;margin-top:0; padding:0;}
        .box .st{float:left; height:25px; line-height:25px;padding:0 6px;}
        .box .kqzl{float:left; height:25px; line-height:25px;margin-top:0; padding:0 6px 0 0;}
        .box .zl_txt{float:left; height:20px; line-height:20px;margin-top:2px; padding:0 6px; background:#9ED15B; color:#fff;}
        .gk_box .wtpic{line-height:25px;height:20px;float:left;width:100%;}
        a:link {text-decoration: none;}
        a:visited {text-decoration: none;}
        a:hover {text-decoration: none;}
        a:active {text-decoration: none;}
    </style>
</head>
<body marginwidth="0" marginheight="0"  style="background-color:transparent">
<div id="mobile280" style="float:left;width:280px; height:25px; position:relative;" >
    <div class="box" style="font-size: 12px;">
        
        <a target="_blank" href="http://wuxi1.tianqi.com/?tq"><span class="wtpic"><img class='pngtqico' align='absmiddle' src='//plugin.tianqistatic.com/static/images/tianqi/b0.png' style='border:0;width:20px;height:20px'/></span>
            <span class="wtline">8℃～20℃</span>
            <span class="st">|</span><span class="kqzl">空气质量：</span><span class="zl_txt" style="background:#eee8d9">
                良</span></a></div>

    <div style="display: none;">
       
    </div>
</div >
<div style="display: none;">
    <script type="text/javascript">
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?86f43783acc56b0c8abb5bb039edc763";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script type="text/javascript" src="https://s5.cnzz.com/z_stat.php?id=1277635480&web_id=1277635480"></script>
</div>

  
</body></html><script type="text/javascript">num=0;temp=0;</script>

—时间封装格式： 20xx年xx月x-xx时xx分14秒 ----

 <div class="showTime">当前时间：20xx年xx月x-xx时xx分14秒</div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".showTime").innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^