博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript实现无刷新评论及在IE下的剪切板访问(学习)
阅读量:4879 次
发布时间:2019-06-11

本文共 2017 字,大约阅读时间需要 6 分钟。

1.无刷新评论


tips:

appendChild:将新元素作为父元素的最后一个子元素进行添加。

insertBefore:在一个指定的子节点之前插入一个节点


实现:

<!DOCTYPE html>

<html>    

<head>

<title></title>        

<style type="text/css">

          #txt{   

      width:400px;     

      height:300px;

         }        

</style>          

<script type = "text/javascript">         

  onload = function() {

         var btn = document.getElementById("btn");

         btn.onclick = function()       {

       var p = document.createElement("p");

         var txt = document.getElementById("txt").value;

         p.appendChild(document.createTextNode(txt));

         var ps = document.getElementById("dv").getElementsByTagName("p");

   //判断是否已经存在评价

    //当评价存在,则将新评论插入到最前

         if(ps.length > 0) {

          document.getElementById("dv").insertBefore(p,ps[0]); //使用insertBefore将新的评论添加到p标签下第一个元素

          }

    //如果评论不存在使用appendChild的方法添加评论到p标签下     

    else {

          document.getElementById("dv").appendChild(p);

              }

            }

          }          

</script>    

</head>   

<body>    

<textarea id="txt"></textarea>

   <br/>    

<input type="button" id = "btn" value="评论"/>    

<br/>    

<div id="dv">         

</div>       

</body>

</html>


2.IE下剪切板的访问


tips:

window.clipboardData.setData("text",文本):"text"为固定属性。添加文本数据到剪切板。

window.clipboardData.getData("text"):"text"为固定属性。获取剪切板中的数据。

window.location:对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面


实现:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>禁止复制</title>    

  <script type="text/javascript">        

    onload = function () {

            //仅仅支持IE浏览器            

      var btn = document.getElementById("btn");            

      var bpase = document.getElementById("btncopy");            

      var txt = document.getElementById("txt");            

      btn.onclick = function () {                

      var h = location.href;                

      window.clipboardData.setData("text",h);

            }

            bpase.onclick = function () {

                var ptxt = window.clipboardData.getData("text");                

     txt.value = ptxt;                           

    }

        }

    </script>

</head>

  <body>    

    <textarea id="txt" style="height:200px;width:400px;">

       </textarea>    

    <input type="button" id="btn" value="点击复制当前网页地址" />

       <input type="button"  id="btncopy" value="粘贴入文本框" />

   </body>

</html>

转载于:https://www.cnblogs.com/Firepad-magic/p/4606690.html

你可能感兴趣的文章
OpenGL 头文件,库文件
查看>>
点与不规则图形关系判断
查看>>
linux不开启图形界面
查看>>
菜鸟学习SSH(二)——Struts国际化
查看>>
iOS 自定义控件--重写一些方法
查看>>
C#工业物联网和集成系统解决方案的技术路线(数据源、数据采集、数据上传与接收、ActiveMQ、Mongodb、WebApi、手机App)...
查看>>
javascript中的事件Event(一)
查看>>
5、泛型
查看>>
第二次冲刺作业
查看>>
【转】HTML, CSS和Javascript调试入门
查看>>
折线图-小案例
查看>>
STL:优先队列Priority Aueue
查看>>
蓝桥历年试题 套娃
查看>>
EF4.0和EF5.0增删改查的写法区别及执行Sql的方法
查看>>
判断是否为移动设备
查看>>
SQL注入原理
查看>>
作业一
查看>>
Matlab控制系统的建模及模型间的转换
查看>>
面向对象编程思想
查看>>
showModalDialog打开一个子窗口,在子窗口添加一条记录后,关闭子窗口刷新父窗口...
查看>>