实时显示日期、时间、城市天气(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 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
37 2
|
4天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
12 4
|
3天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
15 0
html5+three.js公路开车小游戏源码
|
4天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
11天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
55 6
|
25天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
78 1
|
26天前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
15 0
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
22 0
|
2月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台

热门文章

最新文章