添加,删除和修改按钮（HTML节点元素） ESP8266 APP 界面设计（一）

最新推荐文章于 2024-04-06 00:58:05 发布

梅晌

最新推荐文章于 2024-04-06 00:58:05 发布

阅读量2k

点赞数 2

分类专栏： Esp8266 Arduino 智能家居app 文章标签： html5 css3 android web app

本文链接：https://blog.csdn.net/weixin_44301884/article/details/104137382

版权

Esp8266 同时被 3 个专栏收录

9 篇文章 7 订阅

订阅专栏

Arduino

7 篇文章 2 订阅

订阅专栏

智能家居app

4 篇文章 1 订阅

订阅专栏

添加,删除和修改按钮（HTML节点元素）ESP8266 APP 界面设计（一）

作用： APP在控制IO端点时，可以依据实际情况增减，界面控制按钮。

界面如下：
input 用于填写按钮名，按钮访问网址，修改按钮名。
button分别对应，add, del,rep三个按钮。
在这里插入图片描述

添加功能：

function addbtn(){
	var a=document.getElementById("div1");
	var btn=document.createElement("button");
	var btname = document.getElementById('btname').value;
	btn.appendChild(document.createTextNode(btname));
	btn.setAttribute("id", btname); 
	btn.className = "button";
	a.appendChild(btn);
	
    btname.href = "http://192.168.31.166/";
}

删除功能：

function delbtn(){
	var a=document.getElementById("div1");
	var btname = document.getElementById('btname').value;
    a.removeChild(document.getElementById(btname));
}

修改功能：

function repbtn(){
	var a=document.getElementById("div1");
	var btn = document.createElement("button");
    var btname = document.getElementById('btname').value;
    var btnrep = document.getElementById('btnrep').value;
    btn.setAttribute("id", btnrep); 
    btn.appendChild(document.createTextNode(btnrep));
    btn.className = "button";
    a.replaceChild(btn, document.getElementById(btname));
}

全部代码附上：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加和删除按钮（HTML节点元素）</title>
<style>
	
.button {
	width: 150px;
	height: 70px;
	text-align: center;
	font-weight: 700;
	color: #FFF;
	border-radius: 1px;
	margin: 15px 15px 15px 0;
	position: relative;
	overflow: hidden;
	outline: none;
	border: 0px solid #FFF;
	background: darkcyan;
	font-size: 30px;
	outline:none; 
}
.inputstyle{
	width: 70px;
	height: 20px;
	text-align: center;
}
.divstyle{
	    width: 340px;
	    margin:0 auto;
}
</style>
</head>
<body>
      <input class="inputstyle" id="btname" type="text" value="按钮名称"></input>
    	<input class="inputstyle" id="btnurl" type="text" value="网址"></input>
    	<input class="inputstyle" id="btnrep" type="text" value="修改"></input>
      <button onclick="addbtn()">添加</button>
      <button onclick="delbtn()">删除</button>
      <button onclick="repbtn()">修改</button><br />
      <div class="divstyle" id="div1"></div>
<script>

function addbtn(){
	var a=document.getElementById("div1");
	var btn=document.createElement("button");
	var btname = document.getElementById('btname').value;
	btn.appendChild(document.createTextNode(btname));
	btn.setAttribute("id", btname); 
	btn.className = "button";
	a.appendChild(btn);
	
    btname.href = "http://192.168.31.166/";
}
function delbtn(){
	var a=document.getElementById("div1");
	var btname = document.getElementById('btname').value;
    a.removeChild(document.getElementById(btname));
}
function repbtn(){
	var a=document.getElementById("div1");
	var btn = document.createElement("button");
    var btname = document.getElementById('btname').value;
    var btnrep = document.getElementById('btnrep').value;
    btn.setAttribute("id", btnrep); 
    btn.appendChild(document.createTextNode(btnrep));
    btn.className = "button";
    a.replaceChild(btn, document.getElementById(btname));
}
</script>
</body>
</html>