随机更换背景颜色和背景时钟

最新推荐文章于 2022-05-07 08:38:33 发布

chw_

最新推荐文章于 2022-05-07 08:38:33 发布

阅读量1.4k

点赞数 1

分类专栏：学习笔记文章标签： js背景时钟

本文链接：https://blog.youkuaiyun.com/Han_Wen2015/article/details/45933849

版权

学习笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页背景动态效果，包括随机更换背景颜色及实时更新的背景时钟功能。通过简单的代码实现，使得网页背景更具交互性和趣味性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、随机更换背景颜色：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>随机更换背景颜色</title>
  <script language="javascript">
     function change(){
         var color = new Array(5);
         color[0] = "yellow";//黄色
         color[1] = "red";//红色
         color[2] = "orange";//橘黄色
         color[3] = "blue";//蓝色
         color[4] = "black";//黑色
         color[5] = "silver";//灰色
         index = Math.floor(Math.random()*color.length);
         document.bgColor = color[index];
         }
  </script>
</head>

<body>
   <input type="button" value="点击更换背景颜色" onClick="change();" />
</body>
</html>

二、背景时钟：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>背景时钟</title>
  <script language="javascript">
     function clock(){
         //创建一个时间对象
         var nowtime = new Date();
         var hours = nowtime.getHours();//获取时
         var minutes = nowtime.getMinutes();//获取分
         var seconds = nowtime.getSeconds();//获取秒
         if(eval(hours)<10){
             hours = "0" + hours;
             }
         if(eval(minutes)<10){
             minutes = "0" + minutes;
             }
         if(eval(seconds)<10){
             seconds = "0" + seconds;
             }
         nowtime = hours + ":" + minutes + ":" + seconds;

/*1、write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 
   innerHTML是对象的属性，可用于读取、写入对象的内容。 
   这里是因为需将内容写在<span></span>标签体内 
2、一般用法： 
  （1）document.write("HTML 表达式或 JavaScript 代码") 
  （2）写入内容：对象名称.innerHTML="内容" 
       读取内容：变量=对象名称.innerHTML 
3、innerHTML是对象的属性。 
   一般可用于含有标签体的标签对象上，例如：div、label等*/

         document.getElementById("bgclock").innerHTML=nowtime;
         document.getElementById("bgclock1").innerHTML=nowtime;
         document.getElementById("bgclock2").innerHTML=nowtime;

         //setTimeout() 在指定的毫秒数后调用函数或计算表达式
         var timer=setTimeout("clock()",200);
         }
  </script>
</head>

<body onLoad="clock()">
  <!-- 设置字体样式 -->
  <div id="bgclock" style="position:absolute; visibility:visible; font-family:Arial; color:red; 

font-size:100px; top:100px; left:450px;"></div>
  <div id="bgclock1" style="position:absolute; visibility::visible; font-family:Arial; color:#00F; 

font-size:100px; top:103px; left:453px;"></div>
  <div id="bgclock2" style="position:absolute; visibility::visible; font-family:Arial; color:green; 

font-size:100px; top:106px; left:456px;"></div>
</body>
</html>