为机器人做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>
效果如图：
时间： 2024-10-05 04:09:24