JavaScript编写动态时钟

最新推荐文章于 2024-03-08 10:39:10 发布
最新推荐文章于 2024-03-08 10:39:10 发布
阅读量642 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46537431/article/details/107613758
版权

效果图：
在这里插入图片描述
、在这里插入图片描述
实质上就是调用时间库，再添加一个颜色数组，给显示的时间嵌套一个div盒子，再将颜色数组的颜色设置随机变化，这样就使得时间变化的时候颜色也会发生变化。
完整源代码：

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
  <title>网页时钟</title>
 <style>
  
  </style>
 </head>
 <style>
  
  .center{
     background: url(img/shizhong.jpg) no-repeat center;
            font-size: 50px;
            height: 600px;
            line-height: 620px;
            text-align: center;
  }
 </style>
 <body>
  <div class="center"  id = "spanTip"></div>
 </body>
 <script>
  //格式化时间 给前面加个0；
  function addZero(num){  return   num < 10? '0' + num : num;   } 
  function genDate(){
  var date = new Date();
  //获取时间
  var dateStr =addZero(date.getHours()) +":"+addZero(date.getMinutes())+":"+addZero(date.getSeconds());
  var spanTip = document.getElementById("spanTip");
  spanTip.innerHTML = dateStr;
  //颜色数组
  var color = ['red', 'green', 'yellow', 'blue', 'black', 'gold', 'orange', 'gray', 'pink', 'maroon']; //钟表颜色数组
     var radom = Math.floor(Math.random() * color.length ); //随机数
        spanTip.style.color = color[radom]; //设置随机颜色
 }
  window.setInterval("genDate()",1000);
</script>
</html>
技术萌新阿肖
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript动态时钟两种方法的简单实现
与其终的知识小窝
11-07 1741
JS动态时钟 第一种方法： 优点：代码量少 缺点：需要一定基础才能理解，不过好在我很贴心的写了很多注释啦 效果图： 实现代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>与其终——动态时钟</title> <script ty...
JavaScript实现动态时钟显示
luckyboy!的博客
11-11 4624
1.创建html文件（时钟显示.html）；2.设置html标签；3.设置html标签的CSS样式；4.设置JavaScript；1)创建函数和Date；2）获取date变量中的年、月、日，拼接成日期；3）获取date变量中的小时、分钟、秒和日期，拼接成时间；4）获取节点并向节点中添加日期和时间；5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果
用js实现时钟的实时运动（简单版）
wufu_的博客
11-25 2342
首先准备四张空白背景的图片，分别是表盘，时针，分针，秒针， 创建HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"
HTML文字展示按秒变化的动态时钟
happy81997的博客
03-08 643
<h3 id="clock"></h3> function clock() { let date = new Date() let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hours = date.get...
JS实现动态时钟
weixin_73054157的博客
12-14 352
获取Date变量中的年，月，日，合成日期。获取Date变量中的时，分，秒，合成时间。1.创建HTML文件（时钟.HTML）注：Date返回的是中国标准时间。4.设置JavaScript。2.设置HTML标签。
JavaScript动态钟表
qq_42225915的博客
10-23 209
效果图 CSS @import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700"); * { transition: color .4s, background .4s, border .4s; transition-timing-function: ease-in; } body { background:...
JavaScript实现实时时钟
cathei的博客
07-11 906
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;/body&gt;&
JavaScript编写开发动态时钟
11-20
本实例中，我们探讨的是如何使用JavaScript编写一个动态时钟，即一个实时更新并展示当前时间的计时器。 首先，动态时钟的核心在于获取当前时间。在JavaScript中，我们可以使用`Date`对象来获取系统当前的时间。通过...
基于javascript实现动态时钟效果
10-22
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript Canvas绘制时钟
02-22
接下来，我们将在`clock.js`中编写JavaScript代码来绘制时钟： ```javascript document.addEventListener('DOMContentLoaded', function() { var canvas = document.getElementById('clock'); var ctx = canvas....
JavaScript实现简单的时钟实例代码
10-26
3. HTML中的`<p>`元素作为时钟的显示区域，它的内容由JavaScript动态更新。 这个简单的时钟实例展示了JavaScript如何与DOM交互以及如何处理时间数据，对于初学者来说，这是一个很好的学习实时更新页面内容的例子。...
JS日期对象实现动态时钟
qq_41858795的博客
11-17 2393
JS日期对象实现动态时钟
Html5代码实现动态时钟
DICA的SEOer专栏
04-07 4845
该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。 该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。
js实现动态时钟
wxm_1507448498的博客
10-23 303
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js时钟效果</title> <style> .clock{ width: 600px; height: ...
js实现时钟转动
Zhang_wang_yun的博客
04-17 1061
声明一个`间歇函数`来让时钟每秒自动转动，在里面声明三个`变量`来定义` transform: rotate();`，规定三个钟针旋转多少度。
使用HTML，CSS，JS动态生成时钟
qq_62994974的博客
11-09 681
HTML，CSS，JS制作时钟并有准点报时功能
js经典案例代码大全,js案例代码动态时钟
神经网络爱好者
11-28 263
在这种情况下，浏览器将访问 id=”demo” 的 HTML 元素，并把它的内容(innerHTML)替换为 “My First JavaScript”。大家好，本文将围绕js经典案例代码大全展开说明，js案例代码动态时钟是一个很多人都想弄明白的事情，想搞清楚javascript案例代码需要先了解以下几个事情。JavaScript (JS)是属于网络的脚本语言，目前被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。当向变量赋的值是数值时，不要使用引号。
Javascript实现动态时钟效果(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 225
Javascript实现动态时钟效果(附完整源码)
JS入门：动态的时钟、显示完整的一些方法、新年倒计时
最新发布
good7ob的博客
03-08 618
在网页设计中，动态的时钟和倒计时是很常见的元素，它们能够增加网页的趣味性和实用性。在本文中，我们将会介绍如何使用JavaScript来实现动态的时钟和新年倒计时。使用JavaScript来实现动态的时钟和新年倒计时，这些元素不仅可以增加网页的趣味性和实用性，还可以帮助我们学习和掌握JavaScript的基础知识。新年倒计时是指距离新年的时间倒计时，我们可以使用JavaScript来实现。动态的时钟是指能够实时更新的时钟，我们可以使用JavaScript来实现。希望本文能够对初学者有所帮助。
用javascript代码编写cesium动态水面
09-06
### 回答1： Cesium是一款强大的地球浏览器框架，支持用JavaScript编写动态水面。 下面是一个简单的例子，该代码将创建一个圆形水面： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var entity = viewer.entities.add({ name : 'Water surface', position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), ellipse : { semiMinorAxis : 1000.0, semiMajorAxis : 1000.0, material : new Cesium.ImageMaterialProperty({ image : 'path/to/water.png', repeat : new Cesium.Cartesian2(5.0, 5.0) }) } }); ``` 该代码使用了Cesium的`Viewer`类和`entities.add()`方法创建了一个新的实体。 通过设置实体的`ellipse`属性，我们可以在场景中添加一个圆形水面。 可以通过更改代码中的图像路径、水面大小和位置来调整水面的外观和行为。 ### 回答2： 要用JavaScript代码编写Cesium动态水面，首先需要使用Cesium库和相关插件。下面是一个简单的实现例子： ```javascript // 创建Cesium Viewer const viewer = new Cesium.Viewer("cesiumContainer"); // 创建水面 function createWater() { const waterSurface = new Cesium.Water(new Cesium.Cartesian3(-90000.0, -90000.0, 0.0)); waterSurface.shininess = 0.1; waterSurface.specularIntensity = 0.3; waterSurface.normalMap = "path/to/normalMap.png"; // 水面法线贴图路径 waterSurface.colorBlendMode = Cesium.BlendMode.HIGHLIGHT; waterSurface.colorBlendAmount = 0.5; viewer.scene.primitives.add(waterSurface); // 动态更新水面效果 viewer.clock.onTick.addEventListener(function (clock) { const time = clock.currentTime.secondsOfDay; waterSurface.smallWavesFrequency = time * 0.02; // 水波的频率 waterSurface.smallWavesSpeed = time * 0.01; // 水波的速度 }); } createWater(); ``` 上述代码中，我们使用了Cesium的Water对象创建水面，并设置了一些参数，如光泽度、反射强度、水波法线贴图等。然后，我们使用Cesium的Clock对象监听时钟每Tick的事件，在每个Tick时更新水面的效果，产生动态的水波效果。 需要注意的是，除了以上示例中的代码，还需要加载Cesium的库和相关资源（可以是本地文件或CDN链接），以及创建一个用于显示Cesium的HTML容器（如id为“cesiumContainer”的div），才能使水面正常显示。可以根据实际需求进行更多的参数设置和功能扩展。 ### 回答3： 要用Javascript代码编写Cesium动态水面，首先需要使用Cesium的Water模块。以下是一个简单的示例代码： ```javascript // 创建cesium场景 var viewer = new Cesium.Viewer("cesiumContainer"); // 添加水面 var water = viewer.scene.primitives.add(new Cesium.Water({ // 设置水面的位置和大小 normalMap: "path/to/normal_map.jpg", // 水面法线贴图 frequency: 1000, // 波频 animationSpeed: 0.02, // 波动速度 amplitude: 10.0, // 波动幅度 specularIntensity: 0.8, // 镜面反射强度 baseWaterColor: Cesium.Color.WHITE, // 水面基础颜色 blendColor: Cesium.Color.BLUE, // 混合颜色 properties: { // 设置水面的属性 waves: new Cesium.Cartesian3(10, 10, 0.0) // 波动向量 } })); // 设置相机位置 viewer.scene.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 1000.0) // 设置经纬度和高度 }); ``` 上述代码中，首先创建了一个Cesium的Viewer对象，并实例化了一个水面对象water并添加到场景中。然后通过设置水面的各种参数，如法线贴图、波频、波动速度等，来控制水面的效果。最后设置相机初始位置，以使水面可见。 请注意，在实际应用中，你可能需要根据具体需求对水面进行进一步的自定义和优化，例如调整水面的形状、添加材质等等。以上代码仅作为示例，供参考使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值