实时显示日期、时间、城市天气(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(日期) 对象
39 2
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
27 1
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
18 3
|
11天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
24 4
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
31 0
html5+three.js公路开车小游戏源码
|
11天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
68 6
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
98 1
|
1月前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
15 0