js弹出窗口简单实现代码


Posted in Javascript onMarch 22, 2017

本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body{
      /*margin: 0;*/
    }
    #div1{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div id="div1" onmouseover="getInfo(this)" onmouseout="this.innerHTML=''">

</div>
<button onclick="getInfo()">获取div信息</button>

<hr/>
<a href="111.html" rel="external nofollow" target="_blank">我是超链接</a>
<br/><br/>
<button onclick="myopen1()">新窗口111111111</button>
<button onclick="myopen2()">新窗口222222222</button>
<button onclick="myopen3()">新窗口333333333</button>

<hr/>
<button onclick="myclose()">关掉子窗口</button>

<script>
  var mywin;
  function myclose(){
    if(mywin)
      mywin.close();
  }
  function myopen3(){
    mywin = window.open('333.html', 'news', 'resizable=no');
  }
  function myopen2(){
    mywin = window.open('222.html', 'news', 'resizable=no');
  }
  function myopen1(){
    mywin = window.open('111.html', 'news', 'resizable=no');
  }
  function getInfo(obj){
//    var div1 = document.getElementById('div1');

    obj.innerHTML = obj.offsetWidth+',,'+obj.offsetHeight;
    obj.innerHTML += '<br>'+obj.offsetLeft+',,'+obj.offsetTop;
    // offsetXXX 只能读取不能赋值修改
    obj.offsetWidth = obj.offsetWidth+100;
    // 下面的属性已经不能用了
//    obj.innerHTML += '<br>'+obj.innerWidth+',,'+obj.innerHeight;
  }
</script>
</body>
</html>

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

Javascript 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
js实现自动图片轮播代码
Mar 22 #Javascript
JavaScript中清空数组的三种方式
Mar 22 #Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 #Javascript
tab栏切换原理
Mar 22 #Javascript
js中的DOM模拟购物车功能
Mar 22 #Javascript
js+canvas实现动态吃豆人效果
Mar 22 #Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP实现动态柱状图改进版
2015/03/30 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
javascript天然的迭代器
2010/10/29 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
小学教师国培感言
2014/02/08 职场文书
《画家乡》教学反思
2014/04/22 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers