![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS_HTML_CSS
上个大学被枪毙了四年
这个作者很懒,什么都没留下…
展开
-
记一个flex与img罕见问题
img在flex盒子里,img设置宽度,img高度方向变形(不能等比缩放,高度为图片原始高度);发生在部分ios机型上;查询资料显示safari也就是苹果系列会存在这个问题,原因由内核计算方式不一样;去掉flex属性;或者flex居中;...原创 2022-04-01 00:20:02 · 398 阅读 · 0 评论 -
前端小技巧
随机16颜色:"#" + Math.floor(Math.random() * 16777215).toString(16)原创 2021-08-26 14:52:19 · 108 阅读 · 0 评论 -
HTML5 indexedDB数据库二之创建索引
接上一章:数据库版本更新时创建一个db:var mydb = { name:"myIndexeddb", version:1, db:null};//创建一个全局对象var stus = [ {id:1,name:"小A",age:18}, {id:2,name:"小B",age:21}, {id:3,name:"小C"...原创 2015-12-16 23:24:49 · 642 阅读 · 0 评论 -
HTML5 indexedDB数据库
HTML5新增了一种被称为"indexedDB"数据库,是一种存储在客户端本地的NoSQL数据库。三种事务:只读,读写,版本更新。适配浏览器:window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;window.IDBTran...原创 2015-12-16 20:59:20 · 400 阅读 · 0 评论 -
HTML5 indexedDB数据库二之索引查询和游标
接上一章://创建查询函数function getDataByIndex(db, storeName) { var tx = db.transaction(storeName);//获取查询事务 var store = tx.objectStore(storeName);//查询并获得表 var index = store.index("name_index");/...原创 2015-12-17 00:42:38 · 4428 阅读 · 0 评论 -
File API 二
File API 包含 FileList 对象,FIle对象,Blob对象,FileReader对象。FileList表示用户选择列表,HTML5中是可以使用多文件。Blob对象有两个属性,size和type,File对象继承与Blob对象。通过type可以确定文件类型,比如判断图片文件类型:/image\/\w+/.test(file.type)FileReader把文件读入内存,并...原创 2015-12-18 09:56:16 · 487 阅读 · 0 评论 -
File API 三
FileSystem API:给文件提供一个永久的存储空间,并提供了安全性和独立性。window.requestFileSystem(type, size, successCallBack, errorCallBack)//此方法请求访问浏览器沙箱保护的文件系统window.requestFileSystem = window.requestFileSystem || window...原创 2015-12-18 10:35:37 · 452 阅读 · 0 评论 -
web前端开发神器WebStorm编辑器
WebStorm不仅可以针对html,还可以对一些常见的前端框架进行关联。先说说html,针对html代码的编辑器有很多。其他的比如:notpad++, sublime Text等等。我常用的就是sublime Text,现在基本上只用webStorm。webStorm是一款付费的软件,可以试用,我学习使用是在网上找的激活码。webstorm可以关联js框架及js变量等等,这是一般的编辑器没有的,...原创 2015-10-09 12:07:24 · 1257 阅读 · 0 评论 -
flex 弹性 扩展 收缩
弹性包含了扩展和收缩,但是在一些情况下只需要扩展或者收缩,我一般习惯性用flex:1,却遇到了一个只需要用收缩的需求,查了下flex的其它相关属性,也试了一遍,总结了一下:需要具有弹性盒子就设置flex:1,或者包含flex-shrink和flex-grow属性就能达到弹性盒子效果;需要具有扩展性盒子就设置flex-grow:1,当然比例自己协调;需要具有收缩性盒子不用说设置fl...翻译 2019-07-19 10:34:51 · 953 阅读 · 0 评论 -
angularjs 多个ng-app
最近开发的时候自己搭了一个自己需要的基础框架,在一个页面中需要加载多个ng-app,在网上搜了相关资料。在这整理一下,ng-app不能够嵌套包含,只能并列存在,angular会自动加载第一个ng-app,其余的都需要手动加载。在js中,申明多个module,其中放在html页面的第一个ng-app是不要手动加载,网上说是会报错。。下面是我框架的两个ng-app示例:var page = ...原创 2015-10-20 17:09:07 · 1396 阅读 · 0 评论 -
HTML5 File API 一
HTML5 File API 协议族Directories and System - 文件系统和目录读取FileWriter - 写入文件FileReader - 读取文件File API - 页面选择,文件处理原创 2015-12-16 18:28:34 · 351 阅读 · 0 评论 -
客户端数据存储 WebStorage 二
sessionStorage/localStorage数据保存方法(键值对,类似java的Map):sessionStorage.setItem("key", value);localStorage.setItem("key", value);sessionStorage/localStorage数据读取方法:sessionStorage.getItem("key");//返回对应...原创 2015-12-16 19:06:38 · 329 阅读 · 0 评论 -
HTML5 本地数据库
1. 创建访问数据库的对象//名称、版本号、描述、大小空间var db = openDatabase("mydb", "1.0", "test db", 1024*100);//返回数据库的访问对象,如果不存在数据库则创建数据库2. 使用事务处理db.transaction(function(tx) { //sql语句,参数数组,成功的回调,失败的回调 ...原创 2015-12-16 19:45:15 · 329 阅读 · 0 评论 -
HTML5全局属性
contentEditable:值true/false,是否允许用户直接编辑给定标签显示的内容,获取焦点即可编辑,当没有这个属性时从父级继承下来,即父级元素可编辑自己也可编辑。designMode:只能在js中被修改和编辑,值为on/off,用于指定页面是否可被编辑;为 on 时所有支持contentEditable 属性的元素将都可编辑。hidden:用于隐藏元素,值true/fals...原创 2015-12-12 22:39:51 · 525 阅读 · 0 评论 -
H5 HTTP协议推送 java
HTML5提供了EventSource基于http的推送,不像WebSocket那么复杂。js://初始化function start() { var es = new EventSource('xxxx.action');//参数为url链接,服务器执行推送的方法的链接 es.onopen = open; es.onerror = error; ...翻译 2015-12-11 23:58:10 · 960 阅读 · 0 评论 -
Web Worker
web worker 是运行在后台的js,独立与其他脚本,不会影响页面的性能。web worker 是使用多线程,不会影响主线程的运行。声明(启动)一个worker:var w = new Worker('task.js');worker的三个方法:postMessage();onMessage();terminate();task.js文件中使用postMe...原创 2015-12-11 23:00:18 · 336 阅读 · 0 评论 -
Web 数据存储 localStorage sessionStorage
localStorage 本地存储,没有时间限制,sessionStorage 针对一个Session进行数据存储,浏览器关闭后自动清除,cookie比较:cookie不适合大量数据存储;由每个服务器请求来传递,使得cookie速度慢效率相对低;但cookie是可以设置保存时间的。直接调用localStorage可以调用localStorage对象if(localStorage...原创 2015-12-11 23:30:17 · 321 阅读 · 0 评论 -
HTML5 input元素新增和改良的类型与其js验证
url类型email类型date类型time类型datetime类型datetime-local类型month类型week类型number类型,有min最小值属性,max最大值属性,step自然增长大小,js:$("#numInput").value将获取到字符串数字,$("#numInput").valueAsNumber将获取到数字类型的数字range类型,...原创 2015-12-13 20:55:58 · 438 阅读 · 0 评论 -
HTML5增强的页面元素
figure与figcaption元素,figcaption元素从属于figure元素,一个figure元素只能有一个figcaption元素,一般用于统计图等。details与summary元素,summary元素从属于details元素,一个details元素只能有一个summary元素,用于隐藏和显示详细信息。details对象拥有一个open属性,值为true/false,s...原创 2015-12-13 22:24:23 · 411 阅读 · 0 评论 -
HTML5 form表单新增
1. formaction属性,可以给多个submit按钮添加不同的提交地址;<input type="submit" formaction="url" />2. formmethod属性,给每个submit按钮添加提交方式;<input type="submit" formaction="url" formmethod="POST"/>3....原创 2015-12-13 00:14:11 · 603 阅读 · 0 评论 -
HTML5 页面编辑API之Range对象二
Range对象方法克隆:var r = document.createRange();r.selectNodeContents(node);var clone = r.cloneRange();//克隆Range对象var str = clone.toString();var contents = r.conleContents();//克隆内容div.appen...原创 2015-12-13 23:52:48 · 414 阅读 · 0 评论 -
HTML5 页面编辑API之Range对象
Range对象提供鼠标选取功能,通过Range对象可以获得选取的内容,以及选取的内容的个数。var s = document.getSelection();//此方法获得选中内容s,rangeCount;//获得选中个数s.getRangeAt(index);//获得第index个选中的内容var r = document.createRange();//获得Range对象...原创 2015-12-13 22:55:57 · 1047 阅读 · 0 评论 -
HTML5 缓存
HTML5引入了应用程序缓存,意味着web应用可进行缓存,在没网的时候可以进行访问——离线浏览。启用应用程序缓存,在html标签加入manifest属性。Manifest文件的三个属性:CACHE,NETWORK,FALLBACK。CACHE:用于指定需要缓存的文件;NETWORK:用于指定不需要缓存的文件;FALLBACK:当前页面无法访问404的时候跳转原创 2015-12-11 22:24:49 · 415 阅读 · 0 评论