js 怎么控制css的margin-left 根据事件 8:00~18:00 margin-left的值平均增加
时间: 2024-02-13 14:05:59 浏览: 89
js控制时间
5星 · 资源好评率100%
您可以使用JavaScript来控制CSS的margin-left属性。具体实现可以通过以下步骤:
1. 获取要控制的元素,例如一个div元素,可以使用document.querySelector()方法获取它的DOM对象。
2. 定义一个函数,用来计算当前时间的小时数,例如:
```
function getCurrentHour() {
var now = new Date();
return now.getHours();
}
```
3. 使用setInterval()函数来定时更新margin-left属性的值,例如:
```
var div = document.querySelector('#myDiv');
var initMarginLeft = parseInt(window.getComputedStyle(div).marginLeft);
var intervalId = setInterval(function() {
var hour = getCurrentHour();
var marginLeft = initMarginLeft + (hour - 8) * 10;
div.style.marginLeft = marginLeft + 'px';
}, 1000 * 60 * 5); // 每5分钟更新一次
```
上述代码中,我们首先获取了要控制的div元素,并获取了它的初始marginLeft值。然后使用setInterval()函数定时执行一个函数,该函数首先获取当前小时数,然后根据小时数计算出应该增加的marginLeft值,并将其更新到div元素的样式中。在上述代码中,我们假定工作时间从8:00到18:00,每小时marginLeft增加10像素。
希望这个回答能够帮助到您!
阅读全文