https://www.cnblogs.com/yangfengwu/p/11200767.html
說一下,只要你java學的很好,那么幾乎所有的語言都不在話下了
來看一下樣式設置
運行
在左上角感覺不好看,咱讓他居中
實際上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="paho-mqtt.js" type="text/javascript"></script> <!--加載支持MQTT的包-->
<script>
var client;//定義一個全局變量
function onConnect() {// called when the client connects 如果連接上,進入
document.getElementById("buttonConnect").innerHTML = "斷開";//改變顯示的內容
}
function onConnectionLost(responseObject) {//斷開了連接
if (responseObject.errorCode !== 0) {//回復的不是1就是2具體看 https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
console.log("onConnectionLost:"+responseObject.errorMessage);
document.getElementById("buttonConnect").innerHTML = "連接";//改變顯示的內容
}
}
function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息
console.log("onMessageArrived:"+message.payloadString);
}
function buttonConnectOnclick() {//按鈕點擊事件
try{//加上異常捕獲
client = new Paho.MQTT.Client(document.getElementById("ip").value, Number(document.getElementById("port").value), "clientId");// Create a client instance
// set callback handlers
client.onConnectionLost = onConnectionLost;//設置連接斷開回調函數
client.onMessageArrived = onMessageArrived;//設置接收到消息進入的回調函數
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
client.connect(Options);// connect the client 連接...
}catch (e) {
alert(e);//打印連接中的錯誤
}
}
</script>
<style type="text/css">/*樣式都寫到style里面*/
/*代碼提示 CTRL + ALT + 空格*/
html{/*設置整個頁面*/
width: 100%;/*寬度充滿整個頁面*/
height: 100%;/*高度充滿整個頁面*/
overflow: auto;/*如果有超過屏幕的內容,頁面顯示滾動條 參見:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp */
/*背景色,一般不需要設置,只需要上面的就可以*/
}
body{/*設置整個body*/
width: 100%;/*寬度充滿整個頁面*/
height: 100%;/*高度充滿整個頁面*/
margin-top: 0px;
margin-left: 0px;
text-align: center;
background-color: #00FF00;/*RGB */
}
</style>
</head>
<body>
IP地址: <input type="text" id="ip"> <!--輸入連接的IP地址-->
端口號: <input type="text" value="8083" id="port"> <!--輸入連接的端口號,默認顯示8083-->
<button id="buttonConnect" onclick="buttonConnectOnclick()"> 連接 </button><!--一個按鈕,顯示連接,點擊事件是 buttonConnect-->
</body>
</html>
這是控件默認顯示的位置
要想讓控件偏移,有幾種方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="paho-mqtt.js" type="text/javascript"></script> <!--加載支持MQTT的包-->
<script>
var client;//定義一個全局變量
function onConnect() {// called when the client connects 如果連接上,進入
document.getElementById("buttonConnect").innerHTML = "斷開";//改變顯示的內容
}
function onConnectionLost(responseObject) {//斷開了連接
if (responseObject.errorCode !== 0) {//回復的不是1就是2具體看 https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
console.log("onConnectionLost:"+responseObject.errorMessage);
document.getElementById("buttonConnect").innerHTML = "連接";//改變顯示的內容
}
}
function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息
console.log("onMessageArrived:"+message.payloadString);
}
function buttonConnectOnclick() {//按鈕點擊事件
try{//加上異常捕獲
client = new Paho.MQTT.Client(document.getElementById("ip").value, Number(document.getElementById("port").value), "clientId");// Create a client instance
// set callback handlers
client.onConnectionLost = onConnectionLost;//設置連接斷開回調函數
client.onMessageArrived = onMessageArrived;//設置接收到消息進入的回調函數
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
client.connect(Options);// connect the client 連接...
}catch (e) {
alert(e);//打印連接中的錯誤
}
}
</script>
<style type="text/css">/*樣式都寫到style里面*/
/*代碼提示 CTRL + ALT + 空格*/
html{/*設置整個頁面*/
width: 100%;/*寬度充滿整個頁面*/
height: 100%;/*高度充滿整個頁面*/
overflow: auto;/*如果有超過屏幕的內容,頁面顯示滾動條 參見:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp */
/*背景色,一般不需要設置,只需要上面的就可以*/
}
body{/*設置整個body*/
width: 100%;/*寬度充滿整個頁面*/
height: 100%;/*高度充滿整個頁面*/
margin-top: 0px;
margin-left: 0px;
text-align: center;
background-color: #00FF00;/*RGB */
}
#ip{/*IP地址那個輸入框*/
/*position:relative;/*相對移動,在當前位置的基礎上移動*/
/*left:-20px;/*向左移動20個像素點*/
/*top: 30px;/*向下移動30個像素點*/
position:absolute;/*絕對移動,相對於整個body而言的,body的左上角為零點*/
left:20px;/*距離body左邊緣20個像素*/
top: 30px;/*距離body上邊緣30個像素*/
}
</style>
</head>
<body>
IP地址: <input type="text" id="ip"> <!--輸入連接的IP地址-->
端口號: <input type="text" value="8083" id="port"> <!--輸入連接的端口號,默認顯示8083-->
<button id="buttonConnect" onclick="buttonConnectOnclick()"> 連接 </button><!--一個按鈕,顯示連接,點擊事件是 buttonConnect-->
</body>
</html>
其實我不喜歡這種的....我喜歡java那種的,相對布局或者線性布局
首先咱規定下網頁版調試助手做的樣子
再看一個知識點...放到下一節