实时显示日期、时间、城市天气(HTML+JS)

简介: 实时显示日期、时间、城市天气(HTML+JS)

最近在设计自己的网页,想实现实时显示时间和天气,实时定位,从网上搜索自己实现了一下,如下总结:


实时显示时间:


    <!--setInterval实时显示时间-->
<body>
    <span id="time"></span>
</body>
<script>
    function mytime(){
        var a = new Date();
        var b = a.toLocaleTimeString();
        var c = a.toLocaleDateString();
        document.getElementById("time").innerHTML = c+"&nbsp"+b;
        }
    setInterval(function() {mytime()},1000);
</script>


时间显示为:年月日 时分秒


20190110141838569.png


setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码。

实时显示时间、城市天气:

<iframe name="weather_inc" 
  src="http://i.tianqi.com/index.php?c=code&id=7" 
  style="border:solid 1px #7ec8ea" 
  width="220" height="90" frameborder="0" 
  marginwidth="0" marginheight="0" scrolling="no">
</iframe>


如图示

20190110150545227.png

我用了QQ浏览器、谷歌浏览器和火狐浏览器分别打开验证了一下,发现只有QQ浏览器可以显示太阳图标,定位可以到保定, 其他两个浏览器不显示图标,并且定位只是河北地区。


时间及城市天气还有许多其他显示样式,具体可参考该网站:天气代码定制


大家如果有更好的代码希望可以分享给我,谢谢!

目录
相关文章
|
1月前
|
JavaScript
JS设置日期为0时0分0秒
项目中经常要给设置默认值,搜索从哪天开始,这时候,如果直接通过new Date()来获取时间,会有时分秒,如果快速设置为0时0分0秒?
26 0
|
2天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
17 10
|
11天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
30天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——index.html
纯js实现人脸识别眨眨眼张张嘴案例——index.html
14 0
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
19 3
|
1月前
|
C++
常用日期和时间标准对比:HTML, ISO 8601, RFC 3339, RFC 5322
日期和时间,对于不同系统和平台之间的数据交换和互操作至关重要。本文将对比 HTML 标准、ISO 8601、RFC 3339 和 RFC 5322,为读者提供参考。
33 0
常用日期和时间标准对比:HTML, ISO 8601, RFC 3339, RFC 5322
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字