前端天气插件tpwidget使用方法详解

2024-07-29 11:02:36

本文实例为大家分享了前端天气插件tpwidget的具体使用方法，供大家参考，具体内容如下

PS：需要放到服务器才会生效

方法一：（心知天气）

<div id="tp-weather-widget" style="background: #666"></div>
<script>
  (function (T, h, i, n, k, P, a, g, e) {
    g = function () {
      P = h.createElement(i);
      a = h.getElementsByTagName(i)[0];
      P.src = k;
      P.charset = "utf-8";
      P.async = 1;
      a.parentNode.insertBefore(P, a)
    };
    T["ThinkPageWeatherWidgetObject"] = n;
    T[n] || (T[n] = function () {
      (T[n].q = T[n].q || []).push(arguments)
    });
    T[n].l = +new Date();
    if (T.attachEvent) {
      T.attachEvent("onload", g)
    } else {
      T.addEventListener("load", g, false)
    }
  }(window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js"))
</script>
<script>
  tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "zh-chs",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#FFFFFF",
    "uid": "UB6953924F",
    "hash": "ce68b5b7b447ec5bda327f8c9c2d59f9"
  });
  tpwidget("show");
</script>

结果:

方法二：（中国天气插件）

配置项的设置（例如背景、颜色、圆角）：https://cj.weather.com.cn/plugin/pc

<div id="weather-float-he"></div>
<script type="text/javascript">
WIDGET = {FID: 'KbzQ7JDMhF'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

简单易懂的天气插件（代码分享）

效果图如下: 代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天气</title> <meta name="viewport" content="width=device-width,initial-scale=1"/> <style type="text/cs
前端天气插件tpwidget使用方法详解

本文实例为大家分享了前端天气插件tpwidget的具体使用方法,供大家参考,具体内容如下 PS:需要放到服务器才会生效方法一:(心知天气) <div id="tp-weather-widget" style="background: #666"></div> <script> (function (T, h, i, n, k, P, a, g, e) { g = function () { P = h.createElement
jQuery插件DataTable使用方法详解(.Net平台)

上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable(简称DT),很好用. DT是一款前端插件,和后端完全分离开,就这点来看,我就特别喜欢. 一.使用DT,需要以下支持 js:jq+jquery.dataTables.min.js 二.页面上进行引入js,直接使用DT功能前端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m
JS前端模块化原理与实现方法详解

本文实例讲述了JS前端模块化原理与实现方法.分享给大家供大家参考,具体如下: 1.什么是前端模块化模块化开发,一个模块就是一个实现特定功能的文件,有了模块我们就可以更方便地使用别人的代码,要用什么功能就加载什么模块. 2.模块化开发的好处 1)避免变量污染,命名冲突 2)提高代码利用率 3)提高维护性 4)依赖关系的管理 3.前端模块化的进程前端模块化规范从原始野蛮阶段现在慢慢进入"文艺复兴"时代,实现的过程如下: 3.1 函数封装我们在讲到函数逻辑的时候提到过,函数一个功能是实
php插件Xajax使用方法详解

Xajax是PHP一个不用刷新或者跳到其他页面,就能通过点击组件等与后台后台数据库交互的技术 Xajax是php的一个插件,要想使用Xajax就必须先到其官网中下载一个压缩包,由于国外的网速慢,我也给大家上传了一个(点击打开链接: https://pan.baidu.com/s/1gfkY3mj 密码: bcvu),大家选择下载. 下载完xajax_0.5_minimal.zip把里面的东西放到你要开发的工程目录里面,比如笔者的工程目录是C:\PHPnow-1.5.6\htdocs\myphp\
jQuery树插件zTree使用方法详解

最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔页面的基本结构是这样的这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery zTree树的下载链接页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te
jQuery验证插件validate使用方法详解

1. 写在前面我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页
jQuery html表格排序插件tablesorter使用方法详解

tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQuery和tablesort脚本,并在html中引用该脚本文件: <script type="text/javascript" src="../jquery-latest.js"></script> <script type="
jquery表单插件Autotab使用方法详解

Autotab也是一款功能专一的表单插件,它提供了自动跳格的功能,当用户输入的字符数一旦超过已定义的最大长度,则会根据事先设置的目标自动跳转到相应元素上,省却了用户按[Tab]键的麻烦.最典型的应用就是输入IP地址.软件激活码等地方了,我们做的web项目中也有很多地方可以用到这插件,对于提高用户体验还是很有帮助的. 使用时需要引入jquery.autotab.js,下载地址:点击进入下载页面 <html> <head> <title> New Document <
解决常见的Eclipse SVN插件报错方法详解

在学习SVN的过程中,你经常会遇到SVN插件问题,本文介绍一下在安装SVN插件时常见Eclipse SVN插件报错信息问题,希望本文介绍对你的学习有所帮助. AD: 本节和大家一起看一下SVN插件在安装过程中遇到的常见Eclipse SVN插件报错信息,和大家一起分享一下,希望通过本节的介绍大家知道当出现SVN插件报错时该如何处理. 常见Eclipse SVN插件报错信息: 1.update-rHEADD:/dev/workforceWorkingcopynotlocked;thisisprob
基于Bootstrap下拉框插件bootstrap-select使用方法详解

写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就是给一个它定义好的样式,就会给你展现出一个好看的组件出来,这个比liger-ui的界面做的要好,但是了解了Boostrap的基本语法后,发现在官方的文档中,并没有一些可以动态加载组件的demo,因为之前用的liger-ui,大多数组件都只需要写一行代码,就能很好的,并且很方便的直接与后台进行交互,并

前端天气插件tpwidget使用方法详解

相关推荐

随机推荐