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 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
jQuery示例收集
Nov 05 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python import 上级目录的导入
2020/11/03 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
医药销售求职信范文
2014/02/01 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
文化活动实施方案
2014/03/28 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
英语专业求职信
2014/07/08 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
感恩节寄语2015
2015/03/24 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL