HTML实战-哔哩哔哩个性签名完美实现

ZXT
287 阅读3分钟

最近在玩B站时发现了B站的这个个性签名很有意思，没有保存按钮，点击其他区域就会自动保存。先来给大家看看效果

video.gif

我带着大家把这个小玩意儿给做出来。

我们可以将要实现的功能封装进一个js代码中。当下次 又要创建同样的任务时直接进行调用即可。 首先我们创建出我们的主页面结构，并且定义div区域（挂载点）用来容纳等下要首先的功能。并引入我们等下要使用的script文件。

<div class =app > </div>
<script src="./editInPlace.js"></script>

设计功能类 我们可以设计一个类，利用这个类可以创建出我们的个性签名对象。我们要传入的参数是在哪个盒子里创建这个标签（挂载点），以及标签内默认值。

我们在HTML中创建出这个标签对象

 <script>
     //   流程代码，走向面向对象封装
     new EditInPlace(
        'epl',
        document.getElementById('app'),//挂载点
        '这个家伙很懒，什么都没有留下'
     );
    </script>

在引入的js文件中我们来创建这个类的构造函数，我们通过这个类的原型对象来创建函数构建元素，防止每个对象都重复创建函数，消耗性能 Edit构造函数：

function Edit(id,node,word) {
    this.id = id;
    this.node = node;
    this.word = word;
    this.createElement();
}

原型对象：


Edit.prototype.createElement = function() {
    let div = document.createElement("div");
    div.id = this.id;
    let label =  document.createElement("label");
    label.id = 'lb';
    let input = document.createElement("input");
    input.id = 'inp';
    text = document.createTextNode(this.word);
    label.appendChild(text);
    input.value = this.word;
    div.appendChild(label);
    div.appendChild(input);
    this.node.appendChild(div);
}

这时候我们就可以在HTML中来写入事件监听函数，由于写在HTML中大量的代码并不美观，于是我们同样将函数封装进之前的js文件中。HTML中只要调用这个函数就行了。

注意： 当事件监听函数被另一个函数封装起来时，是无法做到每次的事件监听的，只会在你调用函数的时候创建一个事件。因此我们同样使用事件监听函数来检测点击事件。

document.addEventListener('click',onclick);

接着在js文件中创建事件监听函数：当点击到了label标签时，调用自己写transformToInput方法转换成文本框，点击到了文本框之外的地方以及非label标签时，调用transformToLabel方法转换成标签。

onclick方法：

function onclick(){
    const ipt = document.getElementById('inp');
    const lb = document.getElementById('lb');
    document.addEventListener("click", function(event) {
        // 判断点击的目标是否是该元素或其子元素
        if (!ipt.contains(event.target)&& !lb.contains(event.target)) {
          transformToLabel();
        }
      });
    document.getElementById('lb').addEventListener('click',transformToInput);
}

transformToInput方法

function transformToInput(){
    console.log('aaa');
    document.getElementById('inp').style.display = 'block';
    document.getElementById('lb').style.display = 'none';
    //将文本的值赋给文本框
    document.getElementById('inp').value = document.getElementById('lb').innerText;
}

transformToLabel方法

function transformToLabel(){
    console.log('bbb');
    document.getElementById('inp').style.display = 'none';
    document.getElementById('lb').style.display = 'block';
    //将文本框的值赋给文本
    // console.log(document.getElementById('inp').value);
     document.getElementById('lb').innerText = document.getElementById('inp').value;
}

功能就已经完整实现啦！下面附上源码

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩个签实战</title>
    <script src="./1.js"></script>
</head>
<body>
    <div id="div"></div>
</body>
<script>
    //创建组件
    new Edit(
        'elp',//创建的组件的id
        document.getElementById('div'),
        '这里什么都没有哦'
    );
transformToLabel();
document.addEventListener('click',onclick);
</script>
</html>

js文件

/* @func 创建哔哩哔哩个性签名元素
 * @Data 
 * @Author 邓子
*/
function Edit(id,node,word) {
    this.id = id;
    this.node = node;
    this.word = word;
    this.createElement();
}
Edit.prototype.createElement = function() {
    let div = document.createElement("div");
    div.id = this.id;
    let label =  document.createElement("label");
    label.id = 'lb';
    let input = document.createElement("input");
    input.id = 'inp';
    text = document.createTextNode(this.word);
    label.appendChild(text);
    input.value = this.word;
    div.appendChild(label);
    div.appendChild(input);
    this.node.appendChild(div);
}

function onclick(){
    const ipt = document.getElementById('inp');
    const lb = document.getElementById('lb');
    document.addEventListener("click", function(event) {
        // 判断点击的目标是否是该元素或其子元素
        if (!ipt.contains(event.target)&& !lb.contains(event.target)) {
          transformToLabel();
        }
      });
    document.getElementById('lb').addEventListener('click',transformToInput);

}
//点击了标签

function transformToInput(){
    console.log('aaa');
    document.getElementById('inp').style.display = 'block';
    document.getElementById('lb').style.display = 'none';
    //将文本的值赋给文本框
    document.getElementById('inp').value = document.getElementById('lb').innerText;
}
//点击了除了对话框之外的地方

function transformToLabel(){
    console.log('bbb');
    document.getElementById('inp').style.display = 'none';
    document.getElementById('lb').style.display = 'block';
    //将文本框的值赋给文本
    // console.log(document.getElementById('inp').value);
     document.getElementById('lb').innerText = document.getElementById('inp').value;
}
avatar
文章
阅读
粉丝