简单三步实现报表页面集成天气

本文主要介绍了基于javascript实现报表页面集成天气的方法步骤，简单三步，一看就懂。具有很好的参考价值，需要的朋友一起来看下吧
条条框框的报表页面枯燥乏味？不妨给页面加点“新意”!
前阵子，在看天气预报的时候，发现免费天气预报的调用代码，瞬间想到可以给我开发的报表“润润色”。
一共三个步骤，教你手到擒来
第一步
先去天气资源提供者（自行百度）挑选适合自己页面的预报
第二步
copy框中iframe标签。
JS代码：
 document.writeln("<\/iframe>");</pre></div><p>此代码为可以根据ip自动判断地理位置展示，也可以根据实际需要,适当调整宽度，高度。</p><p>在代码中加入 allowtransparency="true"还可以获得背景透明效果。</p><p style="text-align: center"><img alt="" src="https://ss.0133.cn/article/3d/95/76/3d957604fbb7a6b5eacc76e759395651.jpg-600"/></p><p><strong>第三步</strong></p><p>报表设计器FineReport中调用</p><p><img alt="" src="https://ss.0133.cn/article/bf/70/ed/bf70ed50aa36db19417dbcf3f1912b22.jpg-600"/></p><p>大功告成，下面来张效果图！<br/></p><p style="text-align: center"><img alt="" src="https://ss.0133.cn/article/c5/f9/f5/c5f9f55db77f207d2713b459be741ac2.jpg-600"/></p><p>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持html中文网！</p></div><p>以上就是简单三步实现报表页面集成天气的详细内容，更多请关注0133技术站其它相关文章！</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i
                        class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;"
                                                                               class="action action-rewards"
                                                                               data-event="rewards"><i
                    class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载：<a href="/">0133技术站首页</a> &raquo; <a href="/cate74/">JavaScript 教程</a></div><!--<div class="article-tags">标签：<a href="/archives/tag/javascript" rel="tag">JavaScript</a><a
                    href="/archives/tag/%e5%be%ae%e4%bf%a1" rel="tag">微信</a><a
                    href="/archives/tag/%e5%be%ae%e4%bf%a1%e7%9a%84%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">微信的版本号</a><a
                    href="/archives/tag/%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">版本号</a><a
                    href="/archives/tag/%e8%af%ad%e4%b9%89%e5%8c%96" rel="tag">语义化</a></div>--><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate74/112173516221225.html" rel="prev">Web打印解决方案之普通报表打印功能</a></span><span class="article-nav-next">下一篇<br><a href="/cate74/112174754797025.html" rel="next">jQuery 全选 全不选 事件绑定的实现代码</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate74/112731067600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d2d798d9febd779.jpg-160" alt="如何在JavaScript中使用对象方法？" class="thumb"></a><a href="/cate74/112731067600.html">如何在JavaScript中使用对象方法？</a></li><li><a href="/cate74/112752011600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d32861c799f7757.png-160" alt="18个用于创建漂亮图表的JavaScript库推荐" class="thumb"></a><a href="/cate74/112752011600.html">18个用于创建漂亮图表的JavaScript库推荐</a></li><li><a href="/cate74/112855793600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d42bb0686598404.jpg-160" alt="POST 请求的三种常见数据提交格式" class="thumb"></a><a href="/cate74/112855793600.html">POST 请求的三种常见数据提交格式</a></li><li><a href="/cate74/112863815225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5e13e133098fe155.jpg-160" alt="JavaScript基础--引用数据类型 (对象)" class="thumb"></a><a href="/cate74/112863815225.html">JavaScript基础--引用数据类型 (对象)</a></li><li><a href="/cate74/112899244025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d454d428ac89348.jpg-160" alt="如何在JavaScript中使用字符串？" class="thumb"></a><a href="/cate74/112899244025.html">如何在JavaScript中使用字符串？</a></li><li><a href="/cate74/112916500025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d47eb8530061725.jpg-160" alt="Window对象在前端领域的角色" class="thumb"></a><a href="/cate74/112916500025.html">Window对象在前端领域的角色</a></li><li><a href="/cate74/112917040100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/001/5f6807e416857960.jpg-160" alt="了解JavaScript中的类" class="thumb"></a><a href="/cate74/112917040100.html">了解JavaScript中的类</a></li><li><a href="/cate74/112938684100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d4949232b458994.jpg-160" alt="JavaScript中Switch语句的使用方法" class="thumb"></a><a href="/cate74/112938684100.html">JavaScript中Switch语句的使用方法</a></li></ul></div><!--
            <div class="title" id="comments"><h3>评论
                    <small>抢沙发</small></h3></div><div id="respond" class="no_webshot"><form action="return false;" method="post" id="commentform"><div class="comt"><div class="comt-title"><img data-src="https://secure.gravatar.com/avatar/?s=100&d=mm" class="avatar avatar-100"
                                 height="50" width="50"><p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p></div><div class="comt-box"><textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment"
                                      id="comment" cols="100%" rows="3" tabindex="1"
                                      onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('submit').click();return false};"></textarea><div class="comt-ctrl"><div class="comt-tips"><input type='hidden' name='comment_post_ID' value='6053'
                                                              id='comment_post_ID'/><input type='hidden' name='comment_parent' id='comment_parent' value='0'/><p style="display: none;"><input type="hidden" id="akismet_comment_nonce"
                                                                     name="akismet_comment_nonce" value="40dd7081eb"/></p><label for="comment_mail_notify" class="checkbox inline hide"
                                               style="padding-top:0"><input type="checkbox" name="comment_mail_notify"
                                                                            id="comment_mail_notify"
                                                                            value="comment_mail_notify"
                                                                            checked="checked"/>有人回复时邮件通知我</label><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="245"/></p></div><button type="button" name="submit" id="submit" tabindex="5">提交评论</button>--><!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> --><!--
                            </div></div><div class="comt-comterinfo" id="comment-author-info"><ul><li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li><li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li><li class="form-inline"><label class="hide" for="url">网址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="网址"><span class="text-muted">网址</span></li></ul></div></div></form></div>--></div></div><div class="sidebar"><div class="widget widget_ui_tags"><h3>前端开发</h3><div class="items"><a href="/cate72/">HTML 教程</a><a href="/cate73/">CSS 教程</a><a href="/cate74/">JavaScript 教程</a><a href="/cate79/">Vue.js 教程</a><a href="/cate80/">Node.js 教程</a></div></div><form method="get" class="search-form clearfix" id="search-formhybrid-search" target="_blank" action="/search/article/"><div class="search-input-wrap"><input type="text" class="search-text" placeholder="来搜我" name="word" id="search-texthybrid-search"
                       value="" data-placeholder=""><b class="search-liaosheji"></b><button type="submit" class="search-button"><i class="icon-search"></i></button></div></form><div style="text-align:center;margin:0 auto;"><ul class='hot-search layui-clear'><li style="float:left;margin-right:20px;">热门搜索：</li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=报表集成天气'>报表集成天气</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=简单三步'>简单三步</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=集成页面'>集成页面</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=表单页面'>表单页面</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=集天气'>集天气</a></li></ul></div><br/><div class="widget widget_ui_posts"><h3>置顶推荐</h3><ul><li><a href="/cate99/113256942050000.html"><span class="thumbnail"><img data-src="https://ss.0133.cn/upload/article/000/000/001/61c09166ae006922.jpg" alt="抽审下架是不是废了" class="thumb"></span><span class="text">抽审下架是不是废了</span><span
                            class="muted">2021-12-20</span></a></li></ul></div><div class="widget widget_recent_entries"><h3>猜你喜欢</h3><ul><li><a href="/cate74/11726722110400.html" target="_blank">For循环中分号隔开的3部分的执行顺序探讨</a><span class="post-date">2021-10-10</span></li><li><a href="/cate74/1191451768100.html" target="_blank">JS控件bootstrap datepicker使用方法详解</a><span class="post-date">2021-09-18</span></li><li><a href="/cate74/1137488664400.html" target="_blank">js贪吃蛇游戏实现思路和源码</a><span class="post-date">2021-09-12</span></li><li><a href="/cate74/1134542041025.html" target="_blank">微信小程序 this和that详解及简单实例</a><span class="post-date">2021-09-11</span></li><li><a href="/cate74/1183356311225.html" target="_blank">微信公众号网页分享功能开发的示例代码</a><span class="post-date">2021-09-17</span></li><li><a href="/cate74/1135637848400.html" target="_blank">微信小程序 框架详解及实例应用</a><span class="post-date">2021-09-11</span></li><li><a href="/cate74/1172054624900.html" target="_blank">Node.js中安全调用系统命令的方法（避免注入安全漏洞）</a><span class="post-date">2021-09-16</span></li><li><a href="/cate74/1190501657225.html" target="_blank">微信小程序 删除项目工程实现步骤</a><span class="post-date">2021-09-18</span></li></ul></div><!--<div class="widget widget_ui_tags"><h3>热门标签</h3><div class="items"><a href="/archives/tag/javascript">JavaScript (324)</a></div></div><div class="widget widget_ui_comments"><h3>最新评论</h3><ul><li><a href="" title=""><img data-src="" class="avatar avatar-100" height="50" width="50"><strong></strong></a></li></ul></div>--></div><div id="leftbar" class="leftbar"><div class="leftbar-con"><div style="text-align: center; width: 160px;"></div></div></div></section><footer class="footer"><div class="container"><p>&copy; 2022 <a href="/">WEB前端开发</a></p><p><a href="/cate88/">工具教程</a> | <a href="/cate71/">前端开发</a> | <a href="/cate61/">常见问题</a> | <a
                href="/cate129/">操作系统</a> | <a href="/cate103/">编程</a>  | <a href="/cate108/">网络安全</a>  | <a href="/cate120/">设计</a>  | <a href="/cate137/">站长技巧</a></p><div class="footer-gav" style="margin-bottom: 10px ;font-size: 12px;"><img
                src="https://ss.0133.cn/newimg88/2016/06/beian-gov-cn.png" style="vertical-align: middle; height: 14px;"/><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2021014202号-2</a></div><div class="footer-qrcode"></div></div></footer><script>    window.jsui = {
        www: '',
        uri: '/wp-content/themes/dux',
        ver: '5.2.5',
        roll: ["1", "2"],
        ajaxpager: '0',
        url_rp: '/about'
    };
</script><script type='text/javascript' src='/wp-content/themes/dux/js/libs/bootstrap.min.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-content/themes/dux/js/loader.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=5.0.2'></script><script async="async" type='text/javascript' src='/wp-content/plugins/akismet/_inc/form.js?ver=4.0.8'></script><script type="text/javascript">    var $win = jQuery(window);

    var $WindowW = $win.width();

    var $threebar = jQuery("#leftbar");
    if ($threebar.length) {
        var offsetT = $threebar.offset().top;
        $win.on("scroll.leftbar", function () {
            if ($WindowW >= 1200) {
                if ($win.scrollTop() >= (offsetT)) {
                    $threebar.find(".leftbar-con").css({
                        "position": "fixed",
                        "top": 0
                    });
                } else {
                    $threebar.find(".leftbar-con").css("position", "static")
                }
            }
        });
    }

    // Array
    var imagesArr = [];
    $('#article-content').find("img").each(function (index, Element) {
        imagesArr.push(Element)
    });
    mediumZoom(imagesArr, {
        margin: 24,
        background: '#FFFFFF',
        scrollOffset: 0
    })

</script><script>    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-3448069-1', 'css88.com');
    ga('send', 'pageview');

</script><script>    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?08985692e4db1e8be1cff8097c2979b7";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script><script>    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script></body></html>