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. MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  2. ARC声明属性关键字详解(strong,weak,unsafe_unretained,copy)

    ARC声明属性关键字详解(strong,weak,unsafe_unretained,copy) 在iOS开发过程中,属性的定义往往与retain, assign, copy有关,我想大家都很熟悉了, ...

  3. vue使用iview Timeline 时间轴不显示问题

    vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...

  4. flask总结之session，websocket，上下文管理

    1.关于session flask是带有session的,它加密后存储在用户浏览器的cookie中,可以通过app.seesion_interface源码查看 from flask import Fl ...

  5. 05 oracle中lock和latch的用途

    oracle中lock和latch的用途   本文向各位阐述Oracle的Latch机制,Latch,用金山词霸翻译是门插栓,闭锁,专业术语叫锁存器,我开始接触时就不大明白为什么不写Lock,不都是锁 ...

  6. Struts2知识点小结汇总

    Struts2部分 1. JavaEE软件三层结构和MVC的区别? JavaEE软件三层机构是由sun公司提供JavaEE开发规范的:Web层(表现层).业务逻辑层.数据持久层.[其中WEB层会使用前 ...

  7. C# Oracle批量插入数据进度条制作

    前言 由于项目需求,需要将Excel中的数据进过一定转换导入仅Oracle数据库中.考虑到当Excel数据量较大时,循环Insert语句效率太低,故采用批量插入的方法.在插入操作运行时,会造成系统短暂 ...

  8. 初识Pentaho(一)

    学习一门语言或工具,首先得知道该工具的用途是什么.Pentaho 的官方定义是一个集数据集成和数据分析于一体的平台.这样的解释还是有点模糊.还是看其有哪些特点吧:  ☐可以进行数据集成.谈到数据集成这 ...

  9. Git简单配置ssh秘钥

    执行以下命令: git config --global user.name "demo" git config --global user.email "demo@dem ...

  10. day 14 内置函数二

    1.昨日的补充 reversed    翻转, 将一个序列翻转,返回翻转序列的迭代器 lst = ["河南话", "四川话", "东北", ...