如何通过设置时间来隐藏或显示小部件

时间:2016-08-02 12:59:19

标签: javascript jquery html widget show-hide

This是我的博客,我已经实现了2个小部件,我已将其包含在下面的代码段中。我的目标是实现如下图像。我的意思就像眨眼但不完全眨眼,但显示/隐藏特定的小部件,有些日子,如2天或1周。我的意思是2个小部件应该被时间取代。

image

我的意思是如果第一个小部件显示一段时间并且应该隐藏第二个小部件,如果显示第二个小部件,则第一个小部件应该隐藏我的意思是有任何方法来设置隐藏或显示小部件的时间。



<link rel="stylesheet" href="//cdn.rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" />

    <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
   
 <script src="//cdn.rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>


            <div id="multi-search">
              <select id="cmbColumn" name="cmbColumn">
                <option value="" />Columns
                <option value="apple+" />apple
                <option value="grapes+" />grapes
              </select>
              <select id="cmbSidebar" name="cmbSidebar">
                <option value="" />Sidebars
                <option value="mango+" />mango
                <option value="berry+" />berry

              </select>




<script>
$('#cmbColumn').editableSelect();
$('#cmbSidebar').editableSelect();
</script>
              
              
              <link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
  <em>Multiple Select with Groups</em><br>
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value=""></option>
    <optgroup label="NFC EAST">
      <option>Dallas Cowboys</option>
      <option>New York Giants</option>
      <option>Philadelphia Eagles</option>
      <option>Washington Redskins</option>
    </optgroup>
    <script>
$(".chosen-select").chosen();
      
</script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

终于找到了答案(连同“overflowstack9”):

使用Date()对象显示不同的控件以验证show / hide onload。 请确保这只是一个示例并阅读评论,以确保您了解我们为什么不在此处使用事件或超时:

var control1VisibleCheck = function () {
  var now = new Date();
  //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
  if (now.getMinutes() % 2 == 0)    //I'd like to show control1 on even minutes
    return true;
  return false;
}

if (control1VisibleCheck())
  document.getElementById('multi-search-groups').style.display = 'none';
else
  document.getElementById('multi-search').style.display = 'none';

小提琴:https://jsfiddle.net/uunzq61e/2/