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>

JavaScript实现无刷新评论及在IE下的剪切板访问（学习）的更多相关文章

  1. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  2. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. PHP Ajax JavaScript 实现 无刷新附件上传

    普通表单 前端页面 后台处理 带有文件的表单 刷新方式 前端界面 后台页面 无刷新方式 大文件上传 POST极值 upload极值 上传细节 前端页面 后台处理 总结 对一个网站而言,有一个基本的不可 ...

  5. HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题

    1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...

  6. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  7. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  8. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  9. javascript项目实战---ajax实现无刷新分页

    分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...

随机推荐

  1. 树莓派图形界面启动chromium并全屏

    方法1. 随便一搜都是这种方法 创建文件:  /home/pi/.config/autostart/my.desktop    文件名随意, 后缀必须.desktop 文件内容: ​[Desktop ...

  2. ajax简单做html查询删除(鲜花)

    下载视频+项目链接:https://pan.baidu.com/s/1jUld3-Nqm3fUAzFSX8kjlQ

  3. 一个jquery ajax例子

    上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了.   1.新建一个 ...

  4. 不推荐在iOS的浏览器应用上使用click和mouseover

    iOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计 出来的.Cli ...

  5. HDU 2092 （将表达式变成一元二次方程形式）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2092 整数解 Time Limit: 1000/1000 MS (Java/Others)    Me ...

  6. webservice 从客户端中检测到有潜在危险的 Request.Form 值

    webservice中传递xml格式的参数时报错 webservice 从客户端中检测到有潜在危险的 Request.Form 值解决方案: 1.在web.config的system.web节点中添加 ...

  7. AFNetworking 打印错误信息(二进制信息)

    AFNetworking 打印错误信息(二进制信息) NSError *underError = error.userInfo[@"NSUnderlyingError"]; NSD ...

  8. JS中new运算符的实现原理

    当我们用new运算符new一个构造函数产生一个实例时,比如说: var obj = new Func 时,其背后的步骤是这样的: 1:创建一个继承自 Func.prototype 的新对象:2:执行构 ...

  9. 线上服务内存OOM问题定位三板斧

    相信大家都有感触,线上服务内存OOM的问题,是最难定位的问题,不过归根结底,最常见的原因: 本身资源不够 申请的太多 资源耗尽 58到家架构部,运维部,58速运技术部联合进行了一次线上服务内存OOM问 ...

  10. day 13 内置函数

    内置函数思维导图:https://www.processon.com/view/link/5c13ad2de4b0ed122da75668 内置函数 作用域相关:   locals() 返回当前作用域 ...