最近自己写了一个查询会议室预订情况的界面，要求预订情况可以根据不同的预订时间定位到不同的位置，并且长度对应会议时长，效果如下
预订情况的结果我是使用php查询出来的，我们先来搞定只有一个预订的时候的展示
var div1=document.createElement("div"); var row1=document.getElementsByTagName("body"); var node=document.createTextNode('这个是展示内容'); var top=document.getElementsByTagName("td")[0].getBoundingClientRect().top + 5; var left1=document.getElementsByTagName("td")[1].getBoundingClientRect().left ; var left2=document.getElementsByTagName("td")[2].getBoundingClientRect().left ; var left3=document.getElementsByTagName("td")[1].getBoundingClientRect().left ; var long =left2-left1+0.5; var w =7*long; div1.appendChild(node); row1[0].appendChild(div1); div1.title='这是title内容'; div1.style.textAlign='left'; //左对齐div1.style.height='30px'; //表体高 div1.style.lineHeight='30px'; //用于字体垂直居中 div1.style.borderRadius='5px'; //圆角 div1.style.whiteSpace='nowrap'; div1.style.textOverflow= 'ellipsis'; div1.style.overflow='hidden'; //这三个一起构成超出范围自动省略的效果 div1.style.top= top+'px'; div1.style.left=left3 +'px'; div1.style.width= w + 'px'; div1.style.position='absolute'; div1.style.backgroundColor='red'; 根据会议的开始时间和会议室，用<table>的<td>来定位会议预订的位置和长会议度。
其中的div1.style确定的是CSS的样式。
try { $result = $db -> query($query); } catch (PDOException $e) { echo 'Connection failed: ' . $e->getMessage(); } $res = $result->fetchAll(PDO::FETCH_ASSOC); // PRint_r($res); 展示所有结果 foreach ($res as $value) { // echo "<script type=/"text/javascript/"> /n"; // print_r($value); echo " var div1=document.createElement(/"div/"); /n"; echo " var row1=document.getElementsByTagName(/"body/"); /n"; echo " var node=document.createTextNode('预订人：".$value['name'].";".$value['phone'].";".$value['department'].";会议主题：".$value['meetingtheme']." ".substr($value['starttime'],0,16)."~".substr($value['endtime'],11,5)."'); /n"; switch ($value['meetingroom']) { case '9_1': echo " var top=document.getElementsByTagName(/"td/")[0].getBoundingClientRect().top + 5; /n"; break; case '9_2': echo " var top=document.getElementsByTagName(/"td/")[33].getBoundingClientRect().top + 5; /n"; break; } echo " var left1=document.getElementsByTagName(/"td/")[1].getBoundingClientRect().left ; /n"; echo " var left2=document.getElementsByTagName(/"td/")[2].getBoundingClientRect().left ; /n"; echo " var left3=document.getElementsByTagName(/"td/")[".$value['startid']."].getBoundingClientRect().left ; /n"; echo " var long =left2-left1+0.5; /n"; $w = $value['endid'] - $value['startid']; echo " var w =".$w."*long; /n"; echo " div1.appendChild(node); /n"; echo " row1[0].appendChild(div1); /n"; echo " div1.title='预订人：".$value['name']."；联系电话：".$value['phone']."；部门：".$value['department'].";会议主题：".$value['meetingtheme']." ".substr($value['starttime'],0,16)."~".substr($value['endtime'],11,5)."'; /n"; echo " div1.style.textAlign='left'; /n"; echo " div1.style.height='30px'; //表体高 /n"; echo " div1.style.lineHeight='30px'; //用于字体垂直居中 /n"; echo " div1.style.borderRadius='5px'; //圆角 /n"; echo " div1.style.whiteSpace='nowrap'; /n"; echo " div1.style.textOverflow= 'ellipsis'; /n"; echo " div1.style.overflow='hidden'; //这三个一起构成超出范围自动省略的效果 /n"; echo " div1.style.top= top+'px'; /n"; echo " div1.style.left=left3 +'px'; /n"; echo " div1.style.width= w + 'px'; /n"; echo " div1.style.position='absolute'; /n"; echo " div1.style.backgroundColor='red'; /n"; // echo " </script> /n"; } echo " document.getElementById(/"date/").value=/"$date/";"; echo " document.getElementById(/"meetingdate/").value=/"$date/";"; 其中$res = $result->fetchAll(PDO::FETCH_ASSOC);表示返回所有的查询结果，返回的只有关联数组。然后使用foreach循环每条来循环查询结果，用value[' ']这种形式来提取对应的列值。这样最后就可以得到如我们最开始所说的那样子的展现效果了。其实这还是有改进的空间的，可以将上面的div1.style中一部分整合成一个css样式，然后改一改ClassName就可以进行复用了。
我将这个查询会议室预订情况的网页坐下来之后，发现php来进行网页开发的确上手很快，php的echo就像万能钥匙一样，输出什么就是什么。我刚好懂一点点Javascript，所以直接用JavaScript来控制DOM，输出不同会议的情况。用php循环输出JavaScript，虽然的确代码不那么好看，但是开发快啊。
新闻热点
疑难解答
