16-网页,网站,微信公众号基础入门(网页版MQTT,页面控件位置调整入门)
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那种的,相对布局或者线性布局
首先咱规定下网页版调试助手做的样子
再看一个知识点...放到下一节
https://www.cnblogs.com/yangfengwu/p/11380795.html
16-网页,网站,微信公众号基础入门(网页版MQTT,页面控件位置调整入门)的更多相关文章
- 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)
https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...
- 10-网页,网站,微信公众号基础入门(使用微信自带配置选项实现Airkiss配网)
https://www.cnblogs.com/yangfengwu/p/11066036.html 如果提交失败多提交两次,只要上一节可以,,这一节一定可以的 如果没有设备 这个是我的二维码 咱就测 ...
- 17-网页,网站,微信公众号基础入门(使用Adobe Dreamweaver CS6 制作网页/网站)
https://www.cnblogs.com/yangfengwu/p/11351182.html https://www.cnblogs.com/yangfengwu/p/11200767.htm ...
- 13--网页,网站,微信公众号基础入门(PHP获取网页的get请求)
https://www.cnblogs.com/yangfengwu/p/11148976.html 大家在访问网页的时候有没有注意一件事情 现在咱来看这种哈 现在咱做个功能哈,类似于这样 长话短说 ...
- 15-网页,网站,微信公众号基础入门(网页版MQTT,做自己的MQTT调试助手)
https://www.cnblogs.com/yangfengwu/p/11198572.html 说一下哈,,如果教程哪里看不明白...就去自己百度补充哪一部分,,学习不是死记硬背,需要会学习,永 ...
- 8-网页,网站,微信公众号基础入门(使用Python程序实现微信token验证)
https://www.cnblogs.com/yangfengwu/p/11062034.html 设置一下IP白名单: 填写自己的服务器的IP地址 是不是不可以哈,有多少人都会入这个坑.... ...
- 12-网页,网站,微信公众号基础入门(编写后台PHP程序,实现Airkiss配网)
https://www.cnblogs.com/yangfengwu/p/11067590.html 首先说一下,这两个地方需要配置一样 网站根目录建个文件夹 airkiss的文件夹 里面放上 ind ...
- 4-网页,网站,微信公众号基础入门(配置网站--下载安装PHP)
https://www.cnblogs.com/yangfengwu/p/10979101.html 这一节咱看一下如何在原先的基础上实现网站 首先去下载 PHP https://windows.ph ...
- 9-网页,网站,微信公众号基础入门(使用PHP实现微信token验证)
https://www.cnblogs.com/yangfengwu/p/11062422.html 这一节看怎么用PHP实现上一节的功能 关掉上一节的 学了这么久,忘了告诉大家怎么关闭程序了.... ...
随机推荐
- CSP2019: Lost and Found
再不更就成鸽子了= = Day -INF to Day 0 不记得发生了什么 Day 1 今年HN用网上提交的方式收题?再也不怕因为交代码太晚增加省队名额了 开考看了一眼T1好像是模拟题,特地注意了\ ...
- SQL系列（四）—— 唯一值（distinct）
有时需要查询某列上的不重复的数据,如: SELECT name FROM student; 结果: name lxy lxy lxy lxy 这样的结果显然不符合我们的需求.如何对列数据进行去重,查询 ...
- 关于使用mySqlSugar插入数据异常解决方案
项目的解决方案中引用的有mysqlsugar的数据库操作库,在使用插入数据过程中一些特殊的生僻字或表情符号总会提示: Incorrect string value: '\xF0\x9F...' for ...
- VSCode 命令
淘宝 NPM 镜像 https://npm.taobao.org/ Ctrl+~ 显示终端 npm start 启动项目 cnpm install 安装模块
- centos从零开始安装elasticSearch
前言:elasticSearch作为一款优秀的分布式搜索工具,被广泛用在数据搜集和整理的业务中,知名的比如有github就是采用es来精准的搜索几千万行代码,百度也大量应用es做数据爬取分析,本篇博客 ...
- Js中级复习
JS中级复习—— 1,this 就是js的关键字 用途:指向某一个对象 如何判断this指向: 函数(方法)内—— 一种以函数的方式调用(不带.)this指向window 一种以方法的形式调用(函 ...
- js中 !==和 !=的区别是什么
1.比较结果上的区别 !=返回同类型值比较结果. !== 不同类型不比较,且无结果,同类型才比较. 2.比较过程上的区别 != 比较时,若类型不同,会偿试转换类型. !== 只有相同类型才会比较. 3 ...
- 【转载】C#如何往DataTable中新增一个数据列
在C#中的Datatable数据变量的操作过程中,有时候我们需要往现有的DataTable中新增一个自定义数据列,该列在原有的DataTable变量中并不存在,属于用户手工自定义新增的数据列,在往Da ...
- 美团点评CAT监控平台研究
1. 美团点评CAT监控平台研究 1.1. 前言 此文根据我对官方文档阅读并记录整理所得,中间可能会穿插一些自己的思考和遇坑 1.2. 简介 CAT 是基于 Java 开发的实时应用监控平台,为美团点 ...
- JavaScript 运算符（Operator）
一.算数运算符 1.加法(+) 表示操作数相加: 处理特殊值规则: 如果两个操作数都是字符串,则将第二个操作数与第一个操作数拼接起来: 如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后 ...