欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)仿qq消息的彈出窗效果

 更新時(shí)間：2016年01月06日 09:54:39   作者：偽磚家  
這篇文章主要介紹了js實(shí)現(xiàn)仿qq消息的彈出窗效果，文章代碼實(shí)現(xiàn)模擬qq彈出框消息提醒，感興趣的小伙伴們可以參考一下

在我們的日常開(kāi)發(fā)中，或者生活中，經(jīng)常需要用到彈出窗。這里我們就用js模擬一下qq消息一樣的彈出窗，分享給大家供大家參考，具體內(nèi)容如下
運(yùn)行效果截圖：

直接貼代碼：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>javaScript實(shí)現(xiàn)網(wǎng)頁(yè)右下角彈出窗口代碼</title> 
</head> 
<body> 
<script type="text/javascript"> 
var ShowMsg={ 
  title:'提示', 
  content:'模擬qq彈出框消息提醒', 
  width:'300px', 
  height:'100px', 
  setTitle:function(value){ 
    this.title=value; 
  }, 
  setContent:function(value){ 
    this.content=value; 
  }, 
  getTitle:function(){ 
    return this.title; 
  }, 
  getContent:function(){ 
    return this.content; 
  }, 
  show:function(){ 
    //彈窗div 
    var _winPopDiv = document.createElement('div');  
      _winPopDiv.id="_winPopDiv";  
      _winPopDiv.style.cssText = 'width:300px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:block;'; 
    //消息標(biāo)題div 
    var _titleDiv= document.createElement('div');  
      _titleDiv.id="_titleDiv";   
      _titleDiv.innerHTML=this.getTitle();  
      _titleDiv.style.cssText = 'width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:left; font-size:14px;';  
      _winPopDiv.appendChild(_titleDiv); 
    //關(guān)閉消息按鈕span 
    var _closeSpan= document.createElement('span');  
      _closeSpan.id="_closeSpan";  
      _closeSpan.innerHTML="X"; 
      _closeSpan.style.cssText = 'position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer;font-size:14px;';  
      _titleDiv.appendChild(_closeSpan);  
    //內(nèi)容div 
    var _conDiv= document.createElement('div');  
      _conDiv.id="_conDiv";  
      _conDiv.style.cssText = 'width:100%; height:110px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center;';  
      _conDiv.innerHTML=this.getContent(); 
      _winPopDiv.appendChild(_conDiv);   
    document.body.appendChild(_winPopDiv);  
    //關(guān)閉span綁定事件 
    var closeDiv = document.getElementById("_closeSpan"); 
    if(closeDiv.addEventListener){ 
      closeDiv.addEventListener("click",function(e){  
        if (window.event != undefined) {  
          window.event.cancelBubble = true;  
        } else if (e.stopPropagation) {  
          e.stopPropagation();  
        }  
        document.getElementById('_winPopDiv').style.cssText="display:none;"; 
      },false); 
    }else if(closeDiv.attachEvent){ 
      closeDiv.attachEvent("onclick",function(e){  
        if (window.event != undefined) {  
          window.event.cancelBubble = true;  
        } else if (e.stopPropagation) {  
          e.stopPropagation();  
        }  
        document.getElementById('_winPopDiv').style.cssText="display:none;"; 
      }); 
    } 
  } 
}; 
ShowMsg.show(); 
</script> 
</body> 
</html>

 希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 一文帶你理解JavaScript中的函數(shù)式編程

    一文帶你理解JavaScript中的函數(shù)式編程

    函數(shù)式編程 是一種 編程規(guī)范，也是一種對(duì)語(yǔ)言程序（比如JavaScript）本身能力的 運(yùn)用方式。本篇文章將從 編程規(guī)范 來(lái)介紹函數(shù)式編程的到底是一種什么樣的規(guī)范，希望對(duì)大家有所幫助
    2023-02-02
  • 淺談JS如何寫(xiě)出漂亮的條件表達(dá)式

    淺談JS如何寫(xiě)出漂亮的條件表達(dá)式

    條件表達(dá)式，是我們?cè)赾oding過(guò)程中永遠(yuǎn)躲不開(kāi)的問(wèn)題，也是我們騙代碼行數(shù)最方便的東西，但作為一名程序員，我們也要追求自己的“信達(dá)雅”，下面就讓我們看看以下幾種常見(jiàn)的條件表達(dá)場(chǎng)景，如何寫(xiě)的漂亮！
    2021-05-05
  • TypeScript中的interface與type實(shí)戰(zhàn)

    TypeScript中的interface與type實(shí)戰(zhàn)

    這篇文章主要介紹了TypeScript中的interface與type詳解,它們都是用來(lái)定義類(lèi)型的強(qiáng)大工具，在實(shí)際開(kāi)發(fā)中，你可以根據(jù)具體情況選擇使用 interface 或 type，或者甚至將它們結(jié)合起來(lái)使用，需要的朋友可以參考下
    2023-06-06
  • JavaScript類(lèi)庫(kù)D

    JavaScript類(lèi)庫(kù)D

    D類(lèi)庫(kù)是以為當(dāng)前成熟框架、類(lèi)庫(kù)開(kāi)發(fā)輔助類(lèi)庫(kù)的目標(biāo)而被開(kāi)發(fā)。
    2010-10-10
  • js仿QQ中對(duì)聯(lián)系人向左滑動(dòng)、滑出刪除按鈕的操作

    js仿QQ中對(duì)聯(lián)系人向左滑動(dòng)、滑出刪除按鈕的操作

    這篇文章主要介紹了js仿QQ中對(duì)聯(lián)系人向左滑動(dòng)、滑出刪除按鈕的操作，即編寫(xiě)一個(gè)js向左滑動(dòng)刪除 交互特效的插件，感興趣的小伙伴們可以參考一下
    2016-04-04
  • 詳解javascript遍歷方式

    詳解javascript遍歷方式

    這篇文章主要介紹了詳解javascript遍歷方式，感興趣的小伙伴們可以參考一下
    2015-11-11
  • 淺析JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理

    淺析JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理

    這篇文章主要介紹了JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2023-01-01
  • 動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼

    動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼

    下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法示例

    JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法示例

    這篇文章主要介紹了JS實(shí)現(xiàn)從對(duì)象獲取對(duì)象中單個(gè)鍵值的方法,涉及javascript數(shù)組對(duì)象遍歷、事件監(jiān)聽(tīng)、處理等相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • 小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案

    小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案

    在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)遇到在微信小程序的頁(yè)面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識(shí)點(diǎn),所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09

最新評(píng)論