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