JS实现简单的右下角弹出提示窗口完整实例


Posted in Javascript onJune 21, 2016

本文实例讲述了JS实现简单的右下角弹出提示窗口效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>aa</title>
  <style type="text/css">
   * {
    margin: 0px;
    padding: 0px;
   }
   html, body {
    height: 100%;
   }
   body {
    font-size: 14px;
    line-height: 24px;
   }
   #tip {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 0px;
    width: 180px;
    border: 1px solid #CCCCCC;
    background-color: #eeeeee;
    padding: 1px;
    overflow: hidden;
    display: none;
    font-size: 12px;
    z-index: 10;
   }
   #tip p {
    padding: 6px;
   }
   #tip h1 {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    background-color: #0066CC;
    color: #FFFFFF;
    padding: 0px 3px 0px 3px;
    filter: Alpha(Opacity = 100);
   }
   #tip h1 a, #detail h1 a {
    float: right;
    text-decoration: none;
    color: #FFFFFF;
   }
  </style>
  <script type="text/javascript">
   window.onload = function(){
    var divTip = document.createElement("div");
    divTip.id = "tip";
    divTip.innerHTML = "<h1><a href='javascript:void(0)' onclick='start()'>关闭</a>title</h1><p><a href='javascript:void(0)' onclick='showwin()'>content</a></p>";
    divTip.style.height = '0px';
    divTip.style.bottom = '0px';
    divTip.style.position = 'fixed';
    document.body.appendChild(divTip);
   }
   var handle;
   function start(count){
    var obj = document.getElementById("tip");
    if (parseInt(obj.style.height) == 0) {
     obj.style.display = "block";
     handle = setInterval("changeH('up')", 20);
    }
    else {
     handle = setInterval("changeH('down')", 20)
    }
   }
   function changeH(str){
    var obj = document.all ? document.all["tip"] : document.getElementById("tip"); //docuemnt.all ??????
    if (str == "up") {
     if (parseInt(obj.style.height) > 100) 
      clearInterval(handle);
     else 
      obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";
    }
    if (str == "down") {
     if (parseInt(obj.style.height) < 8) {
      clearInterval(handle);
      obj.style.display = "none";
     }
     else 
      obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";
    }
   }
   function showwin(){
    //document.getElementsByTagName("html")[0].style.overflow = "hidden";
    start();
   }
  </script>
 </head>
 <body>
  <a href="#" onclick="start()">click</a>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
layui table 参数设置方法
2018/08/14 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
详解Python中的条件判断语句
2015/05/14 Python
python利用正则表达式提取字符串
2016/12/08 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python双链表原理与实现方法详解
2020/02/22 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
社区包粽子活动方案
2014/01/21 职场文书
2014年转正工作总结
2014/11/08 职场文书
采购员工作总结范文
2015/08/12 职场文书
装修安全责任协议书
2016/03/22 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python