zoukankan      html  css  js  c++  java
  • 原生js简单留言板功能

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    #win{
    left: 500px;
    300px;
    height: 250px;
    margin: 200px auto;
    border: 3px solid #CCC;
    display: none;
    position: absolute;
    }
    #title{
    300px;
    height: 50px;
    background: #FFFF99;
    text-align: center;
    line-height: 50px;
    position: relative;
    }
    #title span{
    20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    }

    #qqq{
    100%;
    height: 100%;
    background: #CCC;
    opacity: .4;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    }
    b{
    display: block;
    800px;
    height: 50px;
    margin-top:10px;
    background: #38f;
    border: 1px solid #3388FF;
    border-radius: 10px;
    }
    #w{
    display: block;
    800px;
    margin-left: 200px;
    height: 50px;
    background: #38f;
    border: 1px solid #3388FF;
    border-radius: 10px;
    line-height: 50px;

    }
    #list a{
    text-decoration: none;

    }
    #list li{
    list-style:none;
    }
    #list{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    }
    </style>
    </head>
    <body>
    <div id="boss">
    <a href="#" id="lond">登录</a>
    <span id="w">
    邻村少女为何深夜失声尖叫
    </span>
    <div id="qqq"></div>
    <div id="win">

    <div id="title"><p id="mp">标题</p><span id="cu">X</span></div>
    <textarea id="text" rows="10" cols="40"></textarea>
    <input type="button" value="发送" id="go"/>
    <input type="button" value="取消" id="false"/>
    </div>
    <ul id="list">
    <li><a href="#">关闭</a></li>

    </ul>
    </div>


    <script type="text/javascript">
    var oBoss = document.getElementById('boss')
    var oA = document.getElementById('lond');
    var oQ = document.getElementById('qqq');
    var oWin = document.getElementById('win');
    var oTitle = document.getElementById('title');
    var oCu = document.getElementById('cu');
    var oFalse = document.getElementById('false');
    var oGo = document.getElementById('go');
    var oText = document.getElementById('text');
    var oW = document.getElementById('w')
    var oP = document.getElementById('mp')
    var olist = document.getElementById('list')
    oA.onclick = function(){
    oQ.style.display = 'block'
    oWin.style.display = 'block'
    }
    oCu.onclick =function(){
    oQ.style.display = 'none'
    oWin.style.display = 'none'
    }
    oFalse.onclick = function(){
    oQ.style.display = 'none'
    oWin.style.display = 'none'
    oText.value= null

    }
    oTitle.onmousedown = function(ev){
    ev = ev || event;
    var x = ev.clientX - oWin.offsetLeft ;
    var y = ev.clientY - oWin.offsetTop+200 ;
    document.onmousemove = function( ev ){
    ev = ev || event;
    var x1 = ev.clientX - x;
    var y1 = ev.clientY - y;
    oWin.style.left = x1 + 'px';
    oWin.style.top = y1 + 'px';
    };
    };
    document.onclick = function(){
    olist.style.display= 'none'
    }
    oTitle.oncontextmenu = function(ev){
    ev = ev||event;
    olist.style.cssText = 'display:block;left:'+ev.clientX+'px;top:'+ev.clientY+'px;';
    return false;

    }

    olist.onclick = function(){
    oQ.style.display = 'none'
    oWin.style.display = 'none'
    olist.style.display= 'none'

    }
    oTitle.onmouseup = function(){
    document.onmousemove = null;
    };
    oGo.onclick = function(){
    var val = oText.value
    if(val){
    if(oText.value.length <= 150){
    var oB =document.createElement('b')
    var ob = document.createTextNode(val)
    oB.appendChild(ob);
    oW.appendChild(oB);
    oText.value=null;
    oQ.style.display = 'none'
    oWin.style.display = 'none'

    }else{
    alert('内容超过150字')
    }
    }else{
    alert('内容不能不空')
    }
    }
    oP.onselectstart = function(){
    return false
    }
    </script>

    </body>
    </html>

  • 相关阅读:
    Android推送通知指南
    proteus ISIS学习笔记
    总结ACM 中的基本输入输出
    WINDOWS远程默认端口3389的正确修改方式
    SQL还原数据库后孤立用户问题处理(SQL 数据库 拥有对象 无法删除)
    利用计划任务定时备份Express2005数据库
    使用 bcompiler 给PHP代码加密编译
    Discuz X2.5 编辑DIY数据出现:Unknown column 'pid' in 'where clause' 的解决办法
    批处理解决SqlServer自动备份与自动清理7天以前的备份
    PHP去除全角空格与空白字符
  • 原文地址:https://www.cnblogs.com/liuhuanwen/p/5914271.html
Copyright © 2011-2022 走看看