js打开一个页面，怎么知道你在页面停留了多长时间呢，通过本案例可以计算出客户在页面停留的时间，从而可以收集客户对不同产品的喜好程度。a)在页面编写<h2>、<p>文本信息。 b)给<body>元素添加onload事件 c)在<script>中获取当前系统时间entered。 d)编写Timetrack()函数，计算年月日时分秒。 e)通过form表单的name值来获取form表单内input的value

时间: 2024-03-02 19:50:30 浏览: 69

js获取当前时间显示在页面上并每秒刷新

在JavaScript中，获取当前时间并在页面上实时更新是一项常见的任务，尤其在构建动态网页时非常有用。本示例提供了一种简单的方法来实现这一功能，通过JavaScript的内置Date对象和DOM操作来完成。以下是详细解释： 1. **JavaScript Date对象**： JavaScript中的`Date`对象用于处理日期和时间。在示例中，`var date = new Date();`创建了一个新的`Date`实例，它代表了当前的日期和时间（系统时间）。 2. **获取日期和时间组件**： `Date`对象提供了许多方法来获取日期和时间的各个部分，如： - `getFullYear()`：返回四位数的年份，例如2023。 - `getMonth()`：返回月份，从0开始（0表示1月，11表示12月）。 - `getDate()`：返回月份中的天数（1到31）。 - `getHours()`：返回24小时制的小时数（0到23）。 - `getMinutes()`：返回分钟数（0到59）。 - `getSeconds()`：返回秒数（0到59）。 3. **补位函数`fnW(str)`**：为了确保时间格式的一致性（如24小时制的小时、分钟和秒），通常希望这些值始终为两位数。`fnW(str)`函数用于处理这一需求，如果传入的字符串（数字）小于10，它会在前面添加一个"0"。例如，`fnW(1)`将返回"01"。 4. **在页面上显示时间**： `document.getElementById("div1")`是通过ID选择器获取HTML中的`<div>`元素，这个元素将用来显示时间。`innerHTML`属性用于设置或获取元素内部的HTML内容。在`fnDate()`函数中，我们创建了一个格式化的日期字符串，并将其赋值给`div1`的`innerHTML`，从而在页面上显示时间。 5. **使用setInterval进行定时更新**： `setInterval(fn, interval)`函数用于定期执行指定的函数`fn`，间隔以毫秒计。在本例中，`setInterval(fnDate, 1000)`确保`fnDate()`每秒调用一次，从而实现在页面上每秒更新时间的功能。 6. **完整代码解析**：整个HTML文件中，`<script>`标签内的JavaScript代码定义了上述功能。`window.onload`事件确保在页面加载完成后执行`fnDate()`和设置定时器，这样可以确保所有DOM元素都已加载，可以安全地进行操作。这个示例展示了如何利用JavaScript的Date对象和DOM操作来动态地在页面上显示和更新当前时间，同时也展示了如何编写一个补位函数来确保时间格式的统一。这样的技术在实时应用、计时器或日志记录等场景中非常常见。

好的，根据你的要求，以下是一个简单的实现： 1. 在页面中编写 `<h2>`、`<p>` 元素，用于显示文本信息。 ``` <h2>欢迎来到我的网站</h2> <p>这是一个测试页面，用于演示如何计算用户在页面停留的时间。</p> ``` 2. 给 `<body>` 元素添加 `onload` 事件，用于在页面加载完成后触发计时器。 ``` <body onload="startTimer()"> ``` 3. 在 `<script>` 中获取当前系统时间 `entered`。 ``` <script> let entered = new Date().getTime(); </script> ``` 4. 编写 `timetrack()` 函数，用于计算用户在页面停留的时间，并将结果显示在页面上。 ``` <script> function timetrack() { let now = new Date().getTime(); let stayTime = now - entered; let seconds = Math.floor(stayTime / 1000); let minutes = Math.floor(seconds / 60); let hours = Math.floor(minutes / 60); let days = Math.floor(hours / 24); let timeStr = `${days} 天 ${hours % 24} 小时 ${minutes % 60} 分钟 ${seconds % 60} 秒`; document.getElementById('stay-time').innerHTML = timeStr; } </script> ``` 5. 在页面中添加一个 `<form>` 元素，用于获取用户输入的信息。 ``` <form name="product-feedback"> <label>您对以下产品的喜好程度如何？</label> <br> <input type="radio" name="product" value="product-1"> 产品1 <input type="radio" name="product" value="product-2"> 产品2 <input type="radio" name="product" value="product-3"> 产品3 <br> <button type="submit">提交</button> </form> ``` 6. 在 `<body>` 元素中添加一个计时器，用于每隔一秒钟调用一次 `timetrack()` 函数。 ``` <script> function startTimer() { setInterval(timetrack, 1000); } </script> ``` 完整的代码如下： ``` <!DOCTYPE html> <html> <head> <title>测试页面</title> </head> <body onload="startTimer()"> <h2>欢迎来到我的网站</h2> <p>这是一个测试页面，用于演示如何计算用户在页面停留的时间。</p> <form name="product-feedback"> <label>您对以下产品的喜好程度如何？</label> <br> <input type="radio" name="product" value="product-1"> 产品1 <input type="radio" name="product" value="product-2"> 产品2 <input type="radio" name="product" value="product-3"> 产品3 <br> <button type="submit">提交</button> </form> <p>您在页面停留的时间为：<span id="stay-time"></span></p> <script> let entered = new Date().getTime(); function timetrack() { let now = new Date().getTime(); let stayTime = now - entered; let seconds = Math.floor(stayTime / 1000); let minutes = Math.floor(seconds / 60); let hours = Math.floor(minutes / 60); let days = Math.floor(hours / 24); let timeStr = `${days} 天 ${hours % 24} 小时 ${minutes % 60} 分钟 ${seconds % 60} 秒`; document.getElementById('stay-time').innerHTML = timeStr; } function startTimer() { setInterval(timetrack, 1000); } </script> </body> </html> ``` 这段代码会在页面加载完成后开始计时，每隔一秒钟更新一次页面上的停留时间，并且可以获取用户在表单中选择的产品。你可以根据自己的需求进行扩展。

阅读全文

相关推荐

JS计算网页停留时间代码

js获取页面上的时间和当前时间进行比较判断

【JavaScript】语言简介及相关案例.pdf

足球页面

13_离线计算系统_第12-13天（离线综合案例day1-2）.doc

单页面销售 单页网站

网页美工金典案例教程

创意分割线404页面代码.rar

视觉差背景案例.zip

js特效

当当网 JS特效

js特效jquery幻灯广告代码

程序天下:JavaScript实例自学手册

基于javascript实现样式清新图片轮播特效

站群用户体验优化：页面加载速度与响应时间

页面性能测试：利用Selenium-web自动化分析页面加载性能

Chromedriver中的页面性能监控技术

Web前端性能优化与页面加载速度提升

小程序框架mpvue入门教程之开发案例实战三：社交平台小程序

最新推荐

Vue中在新窗口打开页面及Vue-router的使用

解决vue多个路由共用一个页面的问题

Vue 2.0在IE11中打开项目页面空白的问题解决

两种方法实现在HTML页面加载完毕后运行某个js

在vue中实现嵌套页面(iframe)

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

单页面销售单页网站