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. Xcode菜单功能中文翻译

    Xcode菜单功能中文翻译 File  文件 Edit  编辑 View 视图 Navigate 导航 Editor 编辑 Product 产品 Window  窗口 Help 帮助 File  文件 ...

  2. Vue01 vue基础、mvvm、ES6z知识点、计算属性、生命周期

    Vue案例: <body> <div id="app"> <!--第一部分--> <fieldset> <legend> ...

  3. CSS-自定义变量

    使用背景: 一些常见的例子: 为风格统一而使用颜色变量 一致的组件属性(布局,定位等) 避免代码冗余 *更方便的从CSS向JS传递数据(例如媒体断点) 为什么使用: 以下几点是未来CSS属性的简短说明 ...

  4. Reading Notes : 180214 计算机的总线结构

    读书<计算机组成原理>,百度百科 基本上接触过计算机的人,都多少知道计算机的具体构成,但是真正能讲明白的却说了很多,本节将讲解一下计算机的基本硬件构成和一些基本信息,简单认识,以后再深入了 ...

  5. Oracle split分区表引起ORA-01502错误

    继上次删除分区表的分区遇到ORA-01502错误后[详细见链接:Oracle分区表删除分区引发错误ORA-01502: 索引或这类索引的分区处于不可用状态],最近在split分区的时候又遇到了这个问题 ...

  6. 快速排序_c++

    快速排序_c++ GitHub 文解 快速排序正如其名,是一种排序速度较快的排序算法. 其核心思想: 取数组的第一个数,确定其在整个数组中的位置. 以刚刚的数值所确定的位置经数组分为两个部分. 再分别 ...

  7. iOS开发神器InjectionIII

    最近发现了一款适用于iOS开发的神器,希望可以和大家一起分享,同时自己也将有用的东西记录下来,没错就是InjectionIII! 先看一下使用流程: 1.在MAC的App Store里面搜索下载这个工 ...

  8. DB数据源之SpringBoot+MyBatis踏坑过程（六）mysql中查看连接，配置连接数量

    DB数据源之SpringBoot+MyBatis踏坑过程(六)mysql中查看连接,配置连接数量 liuyuhang原创,未经允许禁止转载 系列目录连接 DB数据源之SpringBoot+Mybati ...

  9. 实现一个shell程序

    实现一个自己的shell程序,这个程序有这些功能:解释执行命令,支持输入输出重定向,支持管道,后台运行 程序.当运行该程序后,它支持以下的命令格式: 1.单个命令,如:ls.2.带l到多个参数的命令, ...

  10. 19-3-4 Python进制转换；bool str int三者之间的转换；字符串的索引，切片；for循环的使用

    进制转换: 二进制转十进制:  0010 1111 = 1*2**0+1*2**1+1*2**2+1*2**3+1*2**5 十进制转换二进制: 用十进制数除2逆序取余 --->101010 布 ...