为机器人做html ui,用了Amaze UI的代码 感觉里面的按钮和文本框样式棒极了,拿来和大家分享。
<!doctype html> <html class="no-js"> <head> <Meta charset="utf-8"> <title>Robot</title> <link rel="stylesheet" href="assets/css/amazeui.min.css"> <script src="assets/js/jquery.min.js"></script> </head> <body> <div class="am-g"> <h2 style="text-align:center;">ROBOTv2.0</h2> <div class="am-u-md-8 am-u-sm-centered"> <form class="am-form"> <fieldset class="am-form-set"> <input type="text" id="txt1" onkeyup="showHint(this.value)" placeholder="咱俩聊聊。。"/> <p>Ans: <span id="txtHint"></span></p> </fieldset> <button class="am-btn am-btn-primary am-btn-block" onclick="loadXMLDoc(aaaa)">Clean</button> </form> </div> </div> <script> var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return;id } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("不支持ajax!"); return; } var url="robot.PHP"; url=url+"?info="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> </body> </html>
效果如图:
原文链接:https://www.f2er.com/ajax/163763.html