如何使用javascript更改<div>背景颜色?

时间:2016-07-14 02:25:51

标签: javascript html

每当有效期与今天的日期相同时,我都会尝试更改<div>颜色。我想是可以使用if else statement

这是我现在的代码:

    <div class="col-md-6">
        <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-book" aria-hidden="true"></span>&nbsp;&nbsp;Passport <?php echo "<strong><a href=\"view_latest_passport.php?id=$id\"> $passport</a> /&nbsp; Passport Expiration Date:</strong> $passport_expiration"; ?></div>
    </div>

1 个答案:

答案 0 :(得分:0)

如果你想在这里是一个使用AJAX的原始JavaScript示例,我强烈推荐:

//<![CDATA[
var pre = onload, E, cN, doc, bod, phpize, post, changeBackgroundColorOnExp;
onload = function(){
if(pre)pre();
doc = document; bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
cN = function(elem, className){
  if(doc.getElementsByClassName){
     return elem.getElementsByClassName(className);
  }
  else{
    var all = doc.getElementsByTagName('*'), r = [];
    for(var i=0,l=all.length; i<l; i++){
      var ai = all[i];
      if(ai.className === className){
        r.push(ai);
      }
    }
    return r;
  }
}
phpize = function(obj, ignore){
  var r = [];
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
      var p = ignore ? ignore+'['+i+']' : i;
      var v = obj[i];
      var s = typeof v === 'object' ? phpize(v, p) : encodeURIComponent(p)+'='+encodeURIComponent(v);
      r.push(s);
    }
  }
  return r.join('&');
}
post = function(where, send, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, eval('('+x.responseText+')'));
    }
  }
  x.send(phpize(send));
}
changeBackgroundColorOnExp = function(elem, color, exp){
  if(exp){
    elem.style.backgroundColor = color;
  }
}
post('pageYouGetDataFrom.php', {dateTest:1}, function(res){
  changeBackgroundColorOnExp(cN('col-md-6')[0], '#700', res.exp);
}
}
//]]>

现在 pageYouGetDataFrom.php

<?php
date_default_timezone_set('America/Vancouver'); // change to your timezone
if(isset($_POST['dateTest']) && $_POST['dateTest'] === '1'){
  $req = array(); $td = new DateTime; $xd = new DateTime($resultFromQuery);
  if($td->getTimestamp() > $xd->getTimeStamp()){
    $req['exp'] = true;
  }
  else{
    $req['exp'] = false;
  }
  echo json_encode($req);
}
?>

当然,既然看起来你只是在页面加载时这样做,那么你可以改变代码的底部部分并在初始页面上使用它,但我认为你会感激不尽这个AJAX未来的例子。您无论如何都不想使用客户端时间,因为它可以被浏览器用户更改。

相关问题