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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
jQuery拖动图片删除示例
May 10 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
javascript实现移动端轮播图
Dec 09 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
thinkPHP查询方式小结
2016/01/09 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
js实现点击添加一个input节点
2014/12/05 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python selenium循环登陆网站的实现
2019/11/04 Python
使用Python构造hive insert语句说明
2020/06/06 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
个人作风剖析材料
2014/02/02 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
文艺节目主持词
2015/07/06 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
总结Python常用的魔法方法
2021/05/25 Python