时钟显示变颜色

最新推荐文章于 2022-10-31 20:35:53 发布

Ydc__

最新推荐文章于 2022-10-31 20:35:53 发布

阅读量853

点赞数

分类专栏： c++

本文链接：https://blog.csdn.net/Ydc__/article/details/8296843

版权

c++ 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 2/25/2008 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>JavaScript Digital Clock</title>
<style>
	body{
		background-color: #95A595;
		color: #354535;
	}
	#clock {
		font-family: "Times New Roman", Georgia, serif; 
		font-size: 100pt;
		background: white;
		padding-left: 5px;
		padding-right: 5px;
		border: 5px solid silver;
		width: 900px;
		margin: 0 auto;
	}
	
</style>
<script type="text/javascript">
		function updateClock()
		{
		  var currentTime = new Date();
		
		  var currentHours = currentTime.getHours();
		  var currentMinutes = currentTime.getMinutes();
		  var currentSeconds = currentTime.getSeconds();
		
		  // Pad the minutes with leading zeros, if required 
			if (currentMinutes < 10)
				currentMinutes = "0" + currentMinutes;
			// The following line is functionally equivalent to the 'if' statement above
      // currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

		  // Pad the seconds with leading zeros, if required 
		  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
		
		  // Choose either "AM" or "PM" as appropriate
		  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
		
		  // Convert the hours component to 12-hour format
		  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
		
		  // Convert an hours component if "0" to "12"
		  currentHours = ( currentHours == 0 ) ? 12 : currentHours;
		
			// Get hold of the html elements by their ids
			var hoursElement = document.getElementById("hours");
			var minutesElement = document.getElementById("minutes");
			var secondsElement = document.getElementById("seconds");
			var am_pmElement = document.getElementById("am_pm");

			var h = ((currentHours * 255) / 12).toString(16);
			var m = ((currentMinutes * 255) / 60).toString(16);
			var s = ((currentSeconds * 255) / 60).toString(16);
		    //256

			//alert(h);
			hoursElement.style.color = "#" + h.charAt(0)+h.charAt(1)+"0000";    //前面FF
			minutesElement.style.color = "#00" + m.charAt(0) + m.charAt(1) + "00";  //中间FF
			secondsElement.style.color = "#00"  + "00" +s.charAt(0) + s.charAt(1) ;   //后面FF
			am_pmElement.style.color ="#" + "009900";

			// Put the clock sections text into the elements' innerHTML
			hoursElement.innerHTML = currentHours;
			minutesElement.innerHTML = currentMinutes;
			secondsElement.innerHTML = currentSeconds;
			am_pmElement.innerHTML = timeOfDay;



		}

</script>
<script type="text/javascript" src="/d2l/common/mathjax/2.0/MathJax.js?config=MML_HTMLorMML%2c%2fd2l%2flp%2fmath%2fdisplay%2fconfig.js%3fv%3d9.4.1000.126-8" ></script></head>
<!-- The following line calls the updateClock function when the body of this web page loads,
		 then calls the same function every thousand milliseconds interval -->
<body οnlοad="updateClock(); setInterval( 'updateClock()', 1000 )">
		<h1>The JavaScript digital clock</h1>
		
		<div id='clock' style="text-align: center">
		  <span id="hours"></span>:
			<span id='minutes'></span>:
			<span id='seconds'></span>
			<span id='am_pm'></span>
		</div>
</body>
</html>