下面是我做的一个超简单的购物车,全部都是用原生js做的 css <style>table{text-align: center;}table img{width: 50px;}a {text-decoration: none;color: red; }</style> body <table border="1" cellspacing="0"><thead><tr><th>全选 <input type="checkbox" id="ckAll"/></th><th>商品</th><th>单价</th><th>数量</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox" name="ck"/></td><td><...
一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，就像下面这样： <!-- index.php --><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><?php include(header.php); ?><div>页面主体部分</div><?ph...
最近给卫生局做一个表格上传/可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见。 gitHub地址：https://github.com/codeplay2015/dragToUpload 由于代码中我的注释很详尽，所以具体逻辑实现及不介绍了，大家直接看代码及能明白。现在简单列一个功能清单和一些用到的知识点清单： 模态框文件的批量上传使用formData ...
前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做（用截图工具在指定区域截图，然后保存到本地，再上传的服务器上去）。我这个主要就解决这个批量的人力的优化。好，废话不多说了。直接上逻辑和代码。 这个问题的解决方案：html to canvas to png. 目前有一个这样的插件: html2canvas,html2canvas($targetElem, {useCORS: true,onrender...
两则代码都很简单，这里就不多废话了，直接上代码 代码1， function ntabs(thisObj,Num){if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++){if (i == Num){thisObj.className = "active"; document.getElementById(tabObj+"_cont"+i).style.display = "block"; }else{ tabList[i...
能力检测 在编写代码之前先检测特定浏览器的能力。例如,脚本在调用某个函数之前，可能要先检测该函数首付存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们把注意力集中到相应的能力是否存在上。能力检测无法精确地检测特定的浏览器和版本。 怪癖检测 怪癖实际上是浏览器实现中存在的bug,例如早期的webkit中就存在一个怪癖，即它会再for-in循环中返回被隐藏的属性。怪癖检测通常涉及到运行一段代码，然...
假设我们这里有1到5五张bmp图片，那么控制图片切换显示的核心代码可以为： <script>var i=1;var img = new Array();img[0] = "1.bmp";img[1] = "2.bmp";img[2] = "3.bmp";img[3] = "4.bmp";img[4] = "5.bmp";function playImg(){i=i+1;var imgs = document.getElementById("img");imgs.src =img[i];if(i>=4){i=1;}}window.onload = function(){document.getElementById("img").src="1.bmp";} </script> <img id="img" src="" width...
瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。最近使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。 代码如下：function loadImgLazy(node) {var lazyNode = $([node-type=imglazy], node),mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,imgDataSrc, localUrl;localUrl = location.href;// 获取当...
在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。 在 <head>...</head> 部分. 在 <body>...</body> 部分. 在<body>...</body> 和<head>...</head> 部分. 脚本和外部文件，然后包括在<head>... </ head>部分。在下面的章节中，我们将看到如何可以包含JavaScript方式的不同： 在JavaScript的<head>... </ head>部分： 如果你想在一些事件上运行一个脚本，当用户点击某个...
一段js 左右悬浮广告代码，只要修改广告图片地址与连接地址，相应参数根据页面调整下就可以使用这段左右悬浮广告代码了代码： var delta=0.15var collection;function floaters() {this.items = ;this.addItem = function(id,x,y,content){document.write(<DIV id=+id+ style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:+(typeof(x)==string?eval(x):x)+;top:+(typeof(y)==string?eval(y):y)+">+content+</D...
网页右侧悬浮滚动QQ在线客服代码代码如下:function myEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEvent(on+ev,fn); }else{ obj.addEventListener(ev,fn,false); };};function getbyClass(id,sClass){ var oParent = document.getElementById(id); var all = oParent.getElementsByTagName(*); var array = []; for (var i=0; i<all.length; i++){ if (all[i].className == sClass){ array.push(all[i]); }; }; retu...
读取本地Excel文件内容的Javascript代码： 代码如下:<script type="text/javascript">function read_excel(){ var filePath="D:\abcd9.com.xls"; //要读取的xls var sheet_id=2; //读取第2个表 var row_start=3; //从第3行开始读取 var tempStr=; try{ var oXL = new ActiveXObject("Excel.application"); //创建Excel.Application对象 }catch(err) { alert(err); } var oWB = oXL.Work...
使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。 行内样式(内联样式)即写在html标签中的style属性中，如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签引入css文件，例如<link href="test.css" type="text/css" rel="stylesheet" /> 导入式即为用import引入css文件，例如@im...
其实jquery按回车提交数据是很简单的事情，我们只要检查测到用户按了回车就直接绑定事件.click就实现了提交了，在按钮上我们绑定ajax提交表单事件即可。核心代码 代码如下:$(document).ready(function(){ $("按下回车的控件").keydown(function(e){ var curKey = e.which; if(curKey == 13){ $("#回车事件按钮控件").click(); return false; } }); }); 是用js的ajax功能同时支持回车事件 代码如下:document.onkeydown = function ...
我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1, 2, 3)。 我知道你在想什么。原生方法明显要比jQuery方法快，因为jQuery方法要处理浏览器兼容以及其他一些事情。是的，我完全赞成。写这篇文章并不是出于反对使用jQuery，但如果你针对的是现代浏览器，那么使用原生方法会使性能有很大的提升。许多开发者没有意识到大多数他们使用的jQuery方法可以使用原生方法，或者更轻量级的方法来代替。下面是一些代码示例，展...