使用JS实现动态时间

最新推荐文章于 2024-07-11 18:00:32 发布
最新推荐文章于 2024-07-11 18:00:32 发布
阅读量2k 收藏
点赞数 1
分类专栏： Java 文章标签： 动态 时间 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/John_z1/article/details/52449593
版权
首先在页面上添加引入包<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8" import="java.util.Date"%>


<script text="text/javascript">

//获取当前时间
function systemTime(){
var dateTime=new Date();
var hh=dateTime.getHours();
var mm=dateTime.getMinutes();
var ss=dateTime.getSeconds();

mm=extra(mm);
ss=extra(ss);

document.getElementById("time").innerHTML=hh+":"+mm+":"+ss;

//每秒执行一次
setTimeout("systemTime()",1000);
}

//如果分秒为个位数，则前面加0
function extra(x){
if(x<10){
return "0"+x;
}else{
return x;
}
}

样式处理
</script>

<style type="text/css">
#time{
font:18px/20px "Arial";
font-weight:bold;
color:red;
}
</style>

<body οnlοad="systemTime()">
<div id="time"></div>
</body>

John的博客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取动态时间
fujijiajia923的博客
06-11 363
function time(){ var tmpDate=new Date(); var day; switch(tmpDate.getDay()) { case 0: day="星期日"; break; case 1: day="星期一"; break; case 2: day="星期二"; break; case 3: day="星期三"; break; case 4: day=
使用js实现动态时间
m0_46862838的博客
09-08 900
<body onload="actTime()"> <div id="time"></div> <script> function actTime(){ var time ,year,month,day,hour,minutes,seconds,da,weeks,week; setInterval(function(){ time = new Date(); year = time.getFullYear(..
JavaScript的动态获取当前的时间
yibashou的博客
07-23 1431
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;m
javascript获取时间及动态显示时间
路飞船长的博客
06-28 757
new Date().toLocaleDateString()` 是一个 JavaScript 表达式，用于获取当前日期并将其转换为本地化的日期字符串。它会返回一个表示当前日期的字符串，该字符串符合当前环境的本地化日期格式。本地化日期格式可能因不同的语言、地区和浏览器设置而有所不同。例如，在美国地区，该表达式的输出可能是 "6/27/2023"，而在德国地区，输出可能是 "27.6.2023"。具体的日期格式取决于本地化设置。
html js动态选择时间,HTML+JS动态获取当前时间
weixin_30572265的博客
06-04 611
HTML+JS动态获取当前时间效果图：说明：JavaScript 中 Date 对象创建 Date 对象的语法：var myDate=new Date()常用 Date 对象方法：方法描述Date()返回当日的日期和时间getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)getMonth()从 Date 对象...
javascript设置指定年月日,js动态显示当前时间
阿发狗伪原创
11-14 2064
大家好，本文将围绕js中如何动态显示日期时间展开说明，javascript设置指定年月日是一个很多人都想弄明白的事情，想搞清楚js动态显示当前时间需要先了解以下几个事情。
使用JS实现动态时钟
weixin_43894771的博客
03-09 851
利用setTime()实现动态的时钟效果 代码如下 <html> <head> <meta charset="utf-8"> <title>正在运行的时钟</title> <style type="text/css"> /*设置样式：无边框的文本框...
js实现动态显示时间效果
10-20
总结来说，JavaScript实现动态显示时间效果主要涉及到以下几个关键点： 1. 使用`Date`对象获取当前时间。 2. 通过`getFullYear()`等方法获取时间的各个组成部分。 3. 使用字符串连接将时间部分组合成易读的格式。 4....
纯js实现动态时间显示
10-19
本文将详细解析如何使用纯JavaScript实现动态时间显示。 首先，我们需要理解JavaScript中的Date对象。Date是JavaScript内置的一个对象，它允许我们处理日期和时间。通过创建一个新的Date对象，我们可以获取到当前的...
纯JS实现动态时间显示代码
10-26
本篇文章主要是对纯JS实现动态时间显示的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
动态显示当前时间的js
08-26
兼容所有浏览器的js，用来动态显示当前时间，只需要调用，并传入显示区域的id即可
html+js实现动态显示本地时间
01-19
代码如下: <span xss=removed><... <span xss=removed> </span><body> <span xss=removed> </span> [removed] <span xss=removed> </span> setInterval(“test()”,1000); function test () { ...
JS时间控制实现动态效果的实例讲解
10-19
本文将通过实例讲解如何使用JS时间控制来实现动态效果，包括延迟执行、间隔执行以及清除定时器等操作。 首先，我们需要了解两个核心函数：`setTimeout()` 和 `setInterval()`。这两个函数都与浏览器的时间控制密切...
javascript得到动态时间
love_snow
08-30 426
function window_onload()   {    window.setTimeout("dispgettime()",1000);    var outDate=new Date();    labOver.innerText=outDate.getFull
javascript实现日期时间动态显示
张亚运的专栏
12-23 1480
.aspx代码如下： document.write("") //输出显示日期的容器 //每1000毫秒(即1秒) 执行一次本段代码 setInterval("lblTime.innerText=new Date().toLocaleString()", 1000)
JS中使用定时动态获取系统当前时间
BADAO_LIUMANG_QIZHI的博客
05-14 580
场景 实现 html代码： <div class="form-group col-md-4"><label>调整时间：</label> <input type="text" readonly="readonly" id="finishTime" class="form-co...
JS日期对象实现动态时钟
qq_41858795的博客
11-17 2391
JS日期对象实现动态时钟
js动态获取实时时间
学而不思则罔,思而不学则殆
07-12 2151
js动态获取实时时间
vue2 实现原生 WebSocket
最新发布
weixin_38797742的博客
07-11 242
原生WebSocket： new WebSocket。
three.js实现动态画线
03-21
Three.js是一个基于WebGL的JavaScript库，用于创建和展示3D图形。它提供了丰富的功能和工具，可以轻松实现各种3D效果，包括动态画线。 要使用Three.js实现动态画线，可以按照以下步骤进行： 1. 创建场景(Scene)和相机(Camera)： 首先，需要创建一个场景和一个相机来渲染画面。场景是所有物体的容器，相机决定了观察者的视角。 2. 创建渲染器(Renderer)： 渲染器将场景和相机的内容渲染到HTML页面上。可以选择使用WebGLRenderer或者CanvasRenderer。 3. 创建线条(Line)： 使用Three.js的Line类可以创建线条对象。可以通过指定起点、终点和材质等属性来定义线条的形状和样式。 4. 更新线条的位置： 通过修改线条对象的顶点坐标，可以实现线条的动态效果。可以使用线性插值或者其他算法来计算新的顶点坐标。 5. 渲染场景： 在每一帧更新线条位置后，需要调用渲染器的render方法将场景和相机的内容渲染到页面上。 下面是一个简单的示例代码，演示了如何使用Three.js实现动态画线： ```javascript // 创建场景和相机 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建线条 var material = new THREE.LineBasicMaterial({ color: 0x0000ff }); var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-2, 0, 0)); geometry.vertices.push(new THREE.Vector3(0, 2, 0)); geometry.vertices.push(new THREE.Vector3(2, 0, 0)); var line = new THREE.Line(geometry, material); scene.add(line); // 更新线条位置 function updateLine() { var time = Date.now() * 0.001; // 根据时间计算新的顶点坐标 line.geometry.vertices[1].y = Math.sin(time) * 2; // 修改中间顶点的y坐标 line.geometry.verticesNeedUpdate = true; // 标记顶点需要更新 } // 渲染场景 function render() { updateLine(); renderer.render(scene, camera); requestAnimationFrame(render); } render(); ``` 这是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值