Question

我有两个div和id = "even-date"和id = "odd-date"。

如果今天的日期是偶数，则div#even-date的位置应该排在第一，div#odd-date的位置应该排在第二。

如果今天的日期是奇数，则div#odd-date位置应该排在第一，div#even-date位置应该排在第二。

<div id="container">

    <div id="even-date">
        <p>Today is Even Date</p>
    </div>

    <div id="odd-date">
        <p>Today is Odd Date</p>
    </div>

</div>

我在某个地方找到了一个脚本，如果它的奇数或偶数可以返回，但是我不确定FINAL javascript会改变div元素的位置。

我发现的javascript代码是

var time = new Date().getDate();
if (time % 2 == 0) {
      // Code to change position if even date
  } else {
      // Code to change position if odd date
  }
  document.getElementById("demo").innerHTML = greeting;
}

这就是我发现的全部。有人可以帮我完成一个完整的工作脚本吗？（可能是JSFiddle）

不需要上面的JavaScript，也可以使用完全不同的简单解决方案。

Answer 1

希望这可能对您有帮助

<div id="container">
    <div id="even-date">
        <p>Today is Even Date</p>
    </div>
    <div id="odd-date">
        <p>Today is Odd Date</p>
    </div>
</div>


var date = new Date().getDate();
var oddElement = document.querySelector("#odd-date").outerHTML;
var evenElement = document.querySelector("#even-date").outerHTML;
var container = document.querySelector("#container");
if (date % 2 !== 0) {
    container.innerHTML = oddElement + evenElement;
else
    container.innerHTML = evenElement + oddElement;

Answer 2

如果仅关注您的问题，则可以使用如下所示的脚本和CSS：

function elementDirection(time) {

  if (time % 2 == 0) {
    document.getElementById("container").style.flexDirection = 'column'
  } else {
     document.getElementById("container").style.flexDirection = 'column-reverse'
  }
}

var timeEven = new Date().getDate();
var timeOdd = new Date().getDate() + 1;
elementDirection(timeEven)
setTimeout(() => {elementDirection(timeOdd)}, 1000)

#container {
  display: flex;
}

<div id="container">

<div id="even-date">
    <p>Today is Even Date</p>
</div>

<div id="odd-date">
    <p>Today is Odd Date</p>
</div>

</div>

Answer 3

这将正常工作。

var time = new Date().getDate();
if (time % 2 == 0) {
    //   document.querySelector('#even-date').innerHTML = `<p>Today is ${time}</p>`;
    document.querySelector('#container').innerHTML = `<div id="even-date">
    <p>Today is Even Date</p>
</div>
<div id="odd-date">
    <p>Today is Odd Date</p>
</div>`
  } else {
    document.querySelector('#container').innerHTML = `
    <div id="odd-date">
    <p>Today is Odd Date</p>
    </div>
    <div id="even-date">
    <p>Today is Even Date</p>
  </div>`
  }

<div id="container">
                
                </div>

Answer 4

将其用于您的html，看起来您的代码希望它将为每个div添加day类

<div id="container">

<div id="even-date" class='day'>
    <p>Today is Even Date</p>
</div>

<div id="odd-date" class='day'>
    <p>Today is Odd Date</p>
</div>

</div>

尝试使用javascript，它将确定div元素的偶数日期或奇数日期

var time = new Date().getDate();
if (time % 2 == 0) {
      var myDiv = document.getElementsByClassName('day');
      myDiv.id = 'even-date';
  } 
  else
 {
          var myDiv = document.getElementsByClassName('day');
          myDiv.id = 'odd-date';
  }

Answer 5

如果您要更改容器中子级的顺序，可以使用 flexbox 进行操作。

.flex.column {
  display: flex;
  flex-direction: column;
}

通过每个孩子的order: n更改顺序。

示例

function isEven(n) {
  return n % 2 === 0 ? true : false;
}

// Change order of container children
function changeOrder(container, order) {
  // Set order to each child of the container
  Array.from(container.children).forEach((child, i) => {
    child.setAttribute("style", `order: ${order[i]}`);
  });
}

var container = document.getElementById("container");
var d = new Date().getDate();

if (isEven(d)) {
  changeOrder(container, [1, 2]);
} else {
  changeOrder(container, [2, 1]);
}

#container {
  display: flex;
  flex-direction: column;
}

<div id="container">
  <div id="even-date">
    <p>Today is even date</p>
  </div>
  <div id="odd-date">
    <p>Today is odd date</p>
  </div>
</div>

注意：

该容器必须为display: flex; flex-direction: column，否则它将不起作用。

基于（双/奇）日的股利头寸

5 个答案:

示例