📄 index.html~
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="robots" content="all" />
<meta name="author" content="Luka Cvrk (www.solucija.com)" />
<meta name="Copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="images/style.css" rel="stylesheet" type="text/css" />
<title>Open your windows!</title>
</head>
<body> <script src="prototype.js"></script> <script> function turn_on(index){ var ajax=new Ajax.Request( 'http://192.168.51.31:9000/turn_on.do?index='+index, { method:'GET', onComplete:function(response){ alert(response.responseText); } } ) }; function turn_off(index){ var ajax=new Ajax.Request( 'http://192.168.51.31:9000/turn_off.do?index='+index, { method:'GET', onComplete:function(response){ alert(response.responseText); } } ) }; function get_status(index){ var ajax=new Ajax.Request( 'http://192.168.51.31:9000/get_status.do', { method:'GET', onComplete:function(response){ var ret=eval("("+response.responseText+")") ; $('status').innerHTML=ret["status"]; } } ) }; function get_history(index){ var ajax=new Ajax.Request( 'http://192.168.51.31:9000/get_history.do', { method:'GET', onComplete:function(response){ var ret=eval("("+response.responseText+")") ; $('status').innerHTML=ret["history"]; } } ) }; function get_log(index){ var ajax=new Ajax.Request( 'http://192.168.51.31:9000/get_log.do', { method:'GET', onComplete:function(response){ var ret=eval("("+response.responseText+")") ; $('status').innerHTML=ret["log"]; } } ) }; </script>
<div id="wrap">
<div id="container">
<div id="header">
<p>Open your <span class="red">windows</span>!</p>
</div>
<div id="hmenu">
<a href="#">首页</a>
<a href="#">电力查询</a>
<a href="#">控制中心</a>
<a href="#">高级控制</a>
<a href="#">历史记录</a>
<a href="#">关于系统</a>
<a href="#">操作指南</a>
</div>
<div id="left_column">
<div id="menu">
<a href="#" accesskey="h" title="Accesskey: H">首页<span class="white">Go to homepage</span></a>
<a href="#" accesskey="n" title="Accesskey: N">电力查询<span class="white">Fresh news</span></a>
<a href="#" accesskey="p" title="Accesskey: P">控制中心<span class="white">Recent work</span></a>
<a href="#" accesskey="s" title="Accesskey: S">高级控制<span class="white">Other seasons</span></a>
<a href="#" accesskey="a" title="Accesskey: A">历史记录<span class="white">Who are we?</span></a>
<a href="#" accesskey="c" title="Accesskey: C">关于系统<span class="white">Get in touch!</span></a>
</div>
<p>Every menu item has it's <b>accesskey</b> which is underlined and you can access it by pressing <b>ALT+character</b> (CTRL+character on Mac). </p>
<p>Hovering over the menu items reveals it's short description.</p>
<p><br /><b>Important links:</b></p>
<p><a href="http://www.oswd.org/userinfo.phtml?user=LanVacation">My OSWD showcase</a><br />
<a href="http://www.andreasviklund.com/">Andreas Viklund</a><br />
<a href="http://www.solucija.com/">Solucija</a><br />
<a href="http://snews.awddesign.co.uk/">Try sNews live!</a></p>
</div>
<div id="right_column">
<div class="main_article" style="text-align:center">
<h3 align="left">Look, the lights are shining <span class="red">!</span></h3>
<LI>LED1<img src="images/on.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(1)">
<input type="button" value="turn off" onclick="turn_off(1)"></LI>
<LI>LED2<img src="images/on.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(2)">
<input type="button" value="turn off" onclick="turn_off(2)"></LI>
<LI>LED3<img src="images/off.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(3)">
<input type="button" value="turn off" onclick="turn_off(3)"></LI>
<LI>LED4<img src="images/on.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(4)">
<input type="button" value="turn off" onclick="turn_off(4)"></LI>
<LI>LED5<img src="images/off.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(5)">
<input type="button" value="turn off" onclick="turn_off(5)"></LI>
<LI>LED6<img src="images/off.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(6)">
<input type="button" value="turn off" onclick="turn_off(6)"></LI>
<LI>LED7<img src="images/on.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(7)">
<input type="button" value="turn off" onclick="turn_off(7)"></LI>
<LI>LED8<img src="images/on.png" alt="" width="15" height="15" />
<input type="button" value="turn on" onclick="turn_on(8)">
<input type="button" value="turn off" onclick="turn_off(8)"></LI>
</div>
<div class="other">
<div class="left" style="height:300px">
<h2>电力记录</h2> <input type=button value="getHistory" onclick="get_history()" />
<p id="history">
</p>
</div>
<div class="right" style="height:300px">
<h2>操作日志</h2><input type=button value="getLog" onclick="get_log()" />
<p id="log">
</p>
</div>
</div>
</div>
</div>
<div id="footer">
© 2005, <a href="#">YourSeason.com</a>, Design: <a href="mailto:luka@solucija.com">Luka Cvrk</a>, <a href="http://www.solucija.com/">Solucija</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> barbecue.
</div>
</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -