将django和JavaScript结合,实现实时展示当前时间和时间戳,并且可以随意的暂停和开始的代码,实现一下
时间: 2023-06-03 20:05:48 浏览: 241
hasura-django-starter:Hasura 最好的即时、实时 GraphQL API 与 Django 的内置身份验证模型以及跨两个服务扩展逻辑的能力相结合
以下是基于Django和JavaScript的实时展示当前时间和时间戳的代码示例:
1. 在Django项目中创建一个视图函数,用于渲染HTML模板
```python
from django.shortcuts import render
import time
def index(request):
current_time = time.strftime('%Y-%m-%d %H:%M:%S')
timestamp = int(time.time())
return render(request, 'index.html', {'current_time': current_time, 'timestamp': timestamp})
```
2. 创建一个HTML模板,使用JavaScript代码实时更新当前时间和时间戳的展示,并添加控制按钮
```html
<!DOCTYPE html>
<html>
<head>
<title>Django-JavaScript实时展示当前时间和时间戳</title>
<script type="text/javascript">
var timer; // 定义定时器
function updateTime() {
var date = new Date();
var time = date.toLocaleTimeString();
var timestamp = Math.floor(date.getTime() / 1000); // 时间戳单位为秒
document.getElementById("time").innerHTML = time;
document.getElementById("timestamp").innerHTML = timestamp;
timer = setTimeout(updateTime, 1000); // 每隔1秒更新时间
}
function start() { // 开始按钮
updateTime();
}
function stop() { // 暂停按钮
clearTimeout(timer);
}
</script>
</head>
<body onload="start()">
<h1>当前时间</h1>
<p id="time">{{ current_time }}</p>
<h1>时间戳</h1>
<p id="timestamp">{{ timestamp }}</p>
<button onclick="stop()">暂停</button>
<button onclick="start()">开始</button>
</body>
</html>
```
3. 在Django中配置路由,将视图函数和HTML模板连接起来
```python
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
```
运行Django项目后,在浏览器中访问对应的URL,即可看到实时展示当前时间和时间戳的效果,并且可以使用控制按钮暂停和开始更新。
阅读全文