js实现便利贴效果-杨标的博客

js实现便利贴效果

时间：2019年9月1日
类型：js练习
人员：魏欣怡

本案例素材联系魏欣怡或下载

效果图

案例说明

只要在输入框内输入内容那么就可以产生便利贴，并且位置和颜色随机

第一步：实现布局效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>许个愿吧</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <input type="text" class="txt" placeholder="许个愿吧，按回车键结束">
    <div class="container">
    </div>

<script src="script/wxy.js"></script>
</body>

</html>

第二步：布局样式

html {
    height: 100%;
    background: linear-gradient(0deg,rgb(171, 212, 238),deepskyblue);
    font-family: Arial, Helvetica, sans-serif;
}

body{
    margin: 0;
}

.txt {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 40px;
    text-indent: 1em;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.container .item {
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px;
    width: 170px;
    height: 170px;
    box-shadow: 0 2px 10px 1px rgba(0,0,0,0.2);
    position: absolute;
    border-bottom-right-radius: 50px 10px;
    padding-top: 20px;
}

.container .item p{
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.container .item .close{
    position: absolute;
    right: 7px;
    top: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}

.container .item .close::before{
    content: "X";
}

第三步：完成js的效果

var container=document.querySelector(".container");
var input=document.getElementsByClassName('txt')[0];
var zindex=1;
/**
 * 
 * @param {*} txt 文字
 * @author 魏欣怡
 * @description 创建便利贴
 */
function createDiv(txt) {
    var div=document.createElement("div");
    div.innerText=txt;
    div.className='item';
//模板字符串，可以看出模板字符串是会经常用到的，因为很方便
//设置便利贴的随机背景颜色
    div.style.backgroundColor=`rgb(${random(150, 256)},${random(150, 256)},${random(150, 256)})`;
    container.appendChild(div);
    //设置它的高度，减140是因为不能超出输入框到页面顶部的距离
    var maxH=window.innerHeight-div.offsetHeight-140;
    //一定要记得加px
    div.style.top=random(maxH, 0)+"px";
    //设置宽度，因为我的便利贴肯定是不能超出屏幕的
    var maxW=window.innerWidth-div.offsetWidth;
    //出现位置随机
    div.style.left=random(maxW, 0)+"px";
    var span=document.createElement('div');
    span.className='close';
    div.appendChild(span);
      //点击x关闭
    span.onclick=function () {
        container.removeChild(div);
    }
    //增加层级可以覆盖,每点一次层级加一
    div.onclick=function () {
        div.style.zIndex=zindex;
        zindex++;
    }
}
/**
 * @name createRamdom;
 * @author 魏欣怡
 * @description 打开页面的时候就会有默认的便利贴,也可以理解为存放内容的东西
 */
function createRamdom() {
    var arr=[
        '我要赚钱',
        '我要奋斗，我要努力',
        "世界和平",
        "大家好,才是真的好",
    ]
    for(var i=0;i<arr.length;i++){
        //将里面的每一项都创建
        createDiv(arr[i]);
    }
}
createRamdom();

/**
 * 
 * @param {number} max 
 * @param {number} min
 * @description 产生随机数
 * @author 魏欣怡 
 */
function random(max,min){
    return Math.random()*(max-min)+min;
}

//可以实现我回车就可以直接创建并且直接清空输入框里的内容
input.onkeydown=function (e) {
    if (e.keyCode==13){
        if (input.value != '') {
            createDiv(input.value);
            input.value="";
        }

    }
}

总结

这个案例比较简单，只需掌握创建元素，随机数的应用就可以做到
每一个功能都应该写一个方法，达到模块化，避免命名的冲突，更好的分离，更高的复用性，维护性也高，在写这个方法的时候就不要想着其他的功能该怎么实现，这样反而会让你的思路更乱
当没看到一个效果的时候，应该先想一遍，把大致的思路理清楚，在动手去写，这样才不会到你写到一半的时候怀疑自己对不对
说的不好，请各位见谅

目录CONTENT

js实现便利贴效果

js实现便利贴效果

效果图

案例说明

总结

评论区