js+html5生成自动排列对话框实例


Posted in Javascript onOctober 09, 2017

最近用js和html5写出的弹出多个对话框,并且可以自动排列,占满屏幕时会自动从新开始,话不多说直接上图:
用起来还是十分方便的,如果你感兴趣,代码在后面

js+html5生成自动排列对话框实例

首先是Html页面

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body style="width: 100vw;height: 100vh;padding: 0;margin: 0"> 
<input type="button" value="生成div" onclick="creatDialog()" style="position: absolute;z-index: 200;"/> 
<script src="index.js"></script> 
</body> 
</html>

然后是js

function creatDialog() { 
  // 获取屏幕的宽度和高度 
  var wid=document.body.clientWidth; 
  var hei=document.body.clientHeight; 
 
  //根据已有dialog计算下一个dialog位置 
  var obj=document.getElementsByClassName("dialog"); 
  //5和10为间距 
  var top=5; 
  var left=10; 
 
  if(obj.length!=0){ 
    //不是第一次生成 
    var h=parseInt(hei/(274+5));//求出总行数 
    var w=parseInt(wid/(300+10));//求出总列数 
    var n=parseInt(obj.length/h);//位于第n+1列 
    if(n+1<=w){ 
      var m=obj.length%h//位于第m+1行 
      top=(274+5)*m+5; 
      left=(300+10)*n+10; 
    }else { 
      //屏幕满了移除所有对象,从新开始 
      removeDialog(); 
       top=5; 
       left=10; 
    } 
 
  } 
//生成dialog 
  var dialog=document.createElement('div'); 
  dialog.className="dialog"; 
  dialog.id="dialog"+obj.length; 
  dialog.style.position="absolute"; 
  dialog.style.marginLeft=left+"px"; 
  dialog.style.marginTop=top+"px"; 
  dialog.style.width="300px"; 
  dialog.style.height="274px"; 
  dialog.style.border="solid 1px"; 
  dialog.style.backgroundColor="#FF0000"; 
  document.body.appendChild(dialog); 
} 
 
function removeDialog() { 
  var obj=document.getElementsByClassName("dialog"); 
  var num=obj.length; 
  for(var i=0;i<num;i++){ 
    document.body.removeChild(document.getElementById("dialog"+i)); 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
基于vue--key值的特殊用处详解
Jul 31 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
详解如何让Express支持async/await
Oct 09 #Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 #Javascript
基于zepto.js实现登录界面
Oct 09 #Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 #Javascript
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
You might like
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php防止sql注入简单分析
2015/03/18 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
超级强大的表单验证
2006/06/26 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python素数检测的方法
2015/05/11 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python中url标签使用知识点总结
2020/01/16 Python
详解python的变量缓存机制
2021/01/24 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
农民入党思想汇报
2014/01/03 职场文书
会计的岗位职责
2014/03/15 职场文书
微笑服务标语
2014/06/24 职场文书
安全生产月宣传标语
2014/10/06 职场文书
机关职员工作检讨书
2014/10/23 职场文书
体育活动总结
2015/02/04 职场文书
创业计划书之寿司
2019/07/19 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书