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. mybatis的resultMap自定义结果映射规则

    dao接口 User myGetUserById(Integer id); sql xml自定义封装规则 <!--自定义某个javabean的封装规则 type:自定义规则的java类型 id: ...

  2. java中exception和error有什么区别，运行时异常和一般异常有什么区别

    1.exception和error都是继承了throwable类,在java中只有throwable类型的实例才可以被抛出(throw)或者捕获(catch),它是异常处理机制的基本组成类型 2.ex ...

  3. 创建oracle数据库表空间并分配用户

    我们在本地的oracle上或者virtualbox的oracle上 创建新的数据库表空间操作:通过system账号来创建并授权/*--创建表空间create tablespace YUJKDATAda ...

  4. Java之变量

    Java变量分为类变量.实例变量.局部变量: 类变量包括静态变量: 局部变量:就是本地变量,使用范围:方法,构造器(构造方法),块:销毁:程序执行完或退出立即销毁:局部变量没有默认值,声明的同时必须赋 ...

  5. centos7安装ftp

    1.服务器初始化检查 检查selinux,firewall,iptables是否开启 1.查看selinux的运行状态 [root@zeq ~] getenforce Disabled 我的现在是关闭 ...

  6. 写shell脚本需要注意哪些地方----零基础必看

    shell脚本是完全靠自学的,每一步需要注意的问题都是我自己亲自实践出来的,对于大神可能看来是小儿科,但是对于新手,是必须注意的 一.首先执行 echo $SHELL查看本机的解释器, 二.开始写脚本 ...

  7. Java分布式锁之数据库方式实现

    之前的文章<Java分布式锁实现>中列举了分布式锁的3种实现方式,分别是基于数据库实现,基于缓存实现和基于zookeeper实现.三种实现方式各有可取之处,本篇文章就详细讲解一下Java分 ...

  8. 基于CLGeocoder - 地理编码

    iOS中CoreLocatio框架中的CLGeocoder为我们提供了地理编码方法: 首先需要导入框架 #import <CoreLocation/CoreLocation.h> 地理编码 ...

  9. vue-cli项目使用axios实现登录拦截

    登录拦截 一.路由拦截 项目中某些页面需要用户登录后才可以访问,在路由配置中添加一个字段requireAuth 在router/index.js中 . const router = new Route ...

  10. [翻译]Hystrix wiki–How it Works

    注:本文并非是精确的文档翻译,而是根据自己理解的整理,有些内容可能由于理解偏差翻译有误,有些内容由于是显而易见的,并没有翻译,而是略去了.本文更多是学习过程的产出,请尽量参考原官方文档. 流程图 下图 ...