架构师

您现在的位置是:首页 > 免费源码 > 其他源码

其他源码

天气预报_HTML静态页面_带读秒时钟

架构师小跟班 2020-06-19 其他源码
页面元素包括:自定义的标题,日期时间,温度,天气,地点,还有一个不停滚动读秒的时钟。

页面元素包括:自定义的标题,日期时间,温度,天气,地点,还有一个不停滚动读秒的时钟。

先看下效果:

部分代码:

<!DOCTYPE html>
<html>
<head>
<title>天气预报 - jiagou1216.com</title>
<!-- 架构师小跟班 -->
<!-- https://www.jiagou1216.com -->
<!-- For-Mobile-Apps -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Sleek Weather Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //For-Mobile-Apps -->
<!-- Style -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- Style -->
<!-- JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Javascript -->

<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>

</head>
<body onload="startTime()">

<h1>SLEEK WEATHER WIDGET</h1>

<div class="content">

	<div class="place">

		<div id="txt"></div>

		<div class="dmy">
			<script type="text/javascript">
               var mydate=new Date()
               var year=mydate.getYear()
               if(year<1000)
                 year+=1900
                 var day=mydate.getDay()
                 var month=mydate.getMonth()
                 var daym=mydate.getDate()
               if(daym<10)
                 daym="0"+daym
                 var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
                 var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
                 document.write(""+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"")
            </script>
        </div>

        <div class="city">
        <p>Budapest, Hungary</p>
        </div>

	</div>

	<div class="temp">

		<div id="dd1" class="wrapper-dropdown-3" tabindex="1">

			<span>
			<img src="images/nav.png" alt=""/>
			</span>

			<ul class="dropdown">
										
				<li><a href="#">TODAY</a></li>
				<li><a href="#">FORECAST</a></li>
				<li><a href="#">CITIES</a></li>
				<li><a href="#">NATIONAL</a></li>
				<li><a href="#">WORLD</a></li>
				<li><a href="#">SETTINGS</a></li>

			</ul>

			<script type="text/javascript">

				function DropDown(el) {
					this.dd = el;
					this.initEvents();
				}
				DropDown.prototype = {
					initEvents : function() {
						var obj = this;
											
						obj.dd.on('click', function(event){
							$(this).toggleClass('active');
							event.stopPropagation();
						});	
					}
				}
				$(function() {	
					var dd = new DropDown( $('#dd1') );
						$(document).click(function() {
						// all dropdowns
						$('.wrapper-dropdown-3').removeClass('active');
						});	
				});

			</script>

		</div>

        <p>20° C</p>

        <div class="day">
            
            <div class="sat">
                <h3>Sat</h3>
                <p>19°C↓  22°C↑</p>
            </div>

            <div class="sund">
                <h3>Sun</h3>
                <p>17°C↓ 20°C↑</p>
            </div>

            <div class="mon">
                <h3>Mon</h3>
                <p>15°C↓ 18°C↑</p>
            </div>

            <div class="clear"></div>

        </div>

	</div>

	<div class="clear"></div>
	
</div>

<div class="footer">
     <p>Copyright &copy; 2015 Sleek Weather Widget. All Rights Reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
</div>
</body>
</html>

云盘链接:

链接:https://pan.baidu.com/s/1nLL3r0n3Z3g-AyQSfIALsA 

提取码:boa8 

复制这段内容后打开百度网盘手机App,操作更方便哦


文章评论