需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的。 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE。 前端: 首先引入 html2canvas.js html2canvas(document.body, { //截图对象//此处可配置详细参数onrendered: function(canvas) { //渲染完成回调canvascanvas.id = "mycanvas"; // 生成base64图片数据var dataUrl = canvas.toDataURL(image/png); //指定格式,也可不带参...
对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器已经支持getElementsByClassName()函数,但是对于低版本浏览器来说,还是无法兼容,在脱离其他库的时候,还是得自己封装一个方法。 方法一 function getByClass1(parent, cls){var res = []; //存放匹配结果的数组var ele = parent.getElementsByTagName(*);for(var i = 0; i < ele.length; i++){if(ele[i].cla...
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的、带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="text/javascript"> var xClock=300; //表心位置 var yClock=250; //表心位置 var d=180.0;//钟表圆面的半径 var value = -d*1.07;function enlarge(){d++; ...
本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas 没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下: 1、在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上画园。 2、将隐式画布的影像,以不同的宽高比值,画在另一个显式的画布,以使园变成椭圆。 3、进而,加进动画功能。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...
去除html代码里面的script正则方法 /*** 去除html代码里面的脚本字符(<script ...>...</script>和<script ... />* @author ob**/ public class Regex {/*** @param args*/public static void main(String[] args) {//注意,这里有大小写String s = "<script type=text/javascript>aaaa</SCript>bbbbbbbbb<SCRIPT type=text/javascript />ccccc<SCRIPT type=text/javascript >mm</SCRIPT>";s = s.replaceAll("(?i)(<SCRIPT)[\\s\\S...
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过i...
本文实例讲述了js+html5操作sqlite数据库的方法。分享给大家供大家参考,具体如下: //copyright by lanxyou lanxyou[at]gmail.com var lanxDB=function(dbname){var db=openDatabase(dbname,1.0.0,,65536);return{//返回数据库名getDBName:function(){return dbname;},//初始化数据库,如果需要则创建表init:function(tableName,colums){this.switchTable(tableName);colums.length>0?this.createTable(colums):;return this;},//...
本文实例讲述了html5 canvas画布中删除一个块区域的方法。分享给大家供大家参考,具体如下: 运行效果截图如下:附:图中,黑色小方块即为删除掉的块区域 具体代码如下: index.html: <!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title>canvas中删除一块区域</title><style type="text/css">#canvas {background:black; margin-top:100px; margin-left:200px;}</style></h...
本文实例讲述了js实现input密码框提示信息的方法。分享给大家供大家参考,具体如下: 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下:<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/> <input style="display: ...
本文实例讲述了javascript生成img标签的3种实现方法。分享给大家供大家参考,具体如下: <div id="d1"></div> <script> //HTML function a(){ document.getElementById("d1").innerHTML="<img src=http://baike.baidu.com/cms/rc/240x112dierzhou.jpg>"; } a(); //方法 function b(){ var d1=document.getElementById("d1"); var img=document.createElement("img"); img.src="http://baike.baidu.com/cms/rc/240x112dierzhou.jpg"...
本文实例讲述了javascript实现html页面之间参数传递的四种方法。分享给大家供大家参考,具体如下: 我们知道,在服务器端asp,jsp等程序可以接受html页面上的form传来的参数。那么,可不可以传递参数给html页面呢。可以。 原理:通过window.location.href中的分割符获得各个参数 方法一: /**函数功能:从href获得参数*sHref: http://www.cscenter.com.cn/arg.htm?arg1=d&arg2=re*sArgName:arg1, arg2*return: the value of arg. d...
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。 HTML5的新标签元素有: <header>定义页面或区段的头部; <footer>定义页面或区段的尾部; <nav>定义页面或区段的导航区域; <section>页面的逻辑区域或内容组合; <article>定义正文或一篇完整的内容; <aside>定义补充或相关内容;使用他们能让代码语义化更直观,而且更方便SEO优化。...
HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内。 一、<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签。<script>和</script>会告诉JavaScript在何处开始 和结束。<script>和</script>之间的代码行包含了JavaScript:<span style="font-size:18px;"><script type="text/javascript...
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。 实例<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var element=document.getElem...
本文实例讲述了jQuery+HTML5美女瀑布流布局实现方法。分享给大家供大家参考。具体如下: 这是一款JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击“加载瀑布流布局”按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感。 运行效果截图如下:在线演示地址如下: http://demo.jb51...