随身笔记

博客

  • 字体自适应缩放

    字体自适应缩放，其实也不是什么难技术可以用JS控制也可以用css的@media根据屏幕宽度判断，缩放的比例。问题是屏幕要多宽字体缩放到什么比例才能符合大众这才是问题。

    不说了直接放出代码：

    @media (min-width: 1700px) { html { font-size: 188%; } }
 @media (max-width: 1700px) { html { font-size: 188%; } }
 @media (max-width: 1680px) { html { font-size: 186%; } }
 @media (max-width: 1660px) { html { font-size: 184%; } }
 @media (max-width: 1640px) { html { font-size: 182%; } }
 @media (max-width: 1620px) { html { font-size: 180%; } }
 @media (max-width: 1600px) { html { font-size: 178%; } }
 @media (max-width: 1580px) { html { font-size: 176%; } }
 @media (max-width: 1560px) { html { font-size: 174%; } }
 @media (max-width: 1540px) { html { font-size: 172%; } }
 @media (max-width: 1520px) { html { font-size: 170%; } }
 @media (max-width: 1500px) { html { font-size: 168%; } }
 @media (max-width: 1480px) { html { font-size: 166%; } }
 @media (max-width: 1460px) { html { font-size: 164%; } }
 @media (max-width: 1440px) { html { font-size: 162%; } }
 @media (max-width: 1420px) { html { font-size: 160%; } }
 @media (max-width: 1400px) { html { font-size: 158%; } }
 @media (max-width: 1380px) { html { font-size: 156%; } }
 @media (max-width: 1360px) { html { font-size: 154%; } }
 @media (max-width: 1340px) { html { font-size: 152%; } }
 @media (max-width: 1320px) { html { font-size: 150%; } }
 @media (max-width: 1300px) { html { font-size: 148%; } }
 @media (max-width: 1280px) { html { font-size: 146%; } }
 @media (max-width: 1260px) { html { font-size: 144%; } }
 @media (max-width: 1240px) { html { font-size: 142%; } }
 @media (max-width: 1220px) { html { font-size: 140%; } }
 @media (max-width: 1200px) { html { font-size: 138%; } }
 @media (max-width: 1180px) { html { font-size: 136%; } }
 @media (max-width: 1160px) { html { font-size: 134%; } }
 @media (max-width: 1140px) { html { font-size: 132%; } }
 @media (max-width: 1120px) { html { font-size: 130%; } }
 @media (max-width: 1100px) { html { font-size: 128%; } }
 @media (max-width: 1080px) { html { font-size: 126%; } }
 @media (max-width: 1060px) { html { font-size: 124%; } }
 @media (max-width: 1040px) { html { font-size: 122%; } }
 @media (max-width: 1020px) { html { font-size: 120%; } }
 @media (max-width: 1000px) { html { font-size: 118%; } }
 @media (max-width: 980px) { html { font-size: 116%; } }
 @media (max-width: 960px) { html { font-size: 114%; } }
 @media (max-width: 940px) { html { font-size: 112%; } }
 @media (max-width: 920px) { html { font-size: 110%; } }
 @media (max-width: 900px) { html { font-size: 108%; } }
 @media (max-width: 880px) { html { font-size: 106%; } }
 @media (max-width: 860px) { html { font-size: 104%; } }
 @media (max-width: 840px) { html { font-size: 102%; } }
 @media (max-width: 820px) { html { font-size: 100%; } }
 @media (max-width: 800px) { html { font-size: 98%; } }
 @media (max-width: 780px) { html { font-size: 96%; } }
 @media (max-width: 760px) { html { font-size: 94%; } }
 @media (max-width: 740px) { html { font-size: 92%; } }
 @media (max-width: 720px) { html { font-size: 90%; } }
 @media (max-width: 700px) { html { font-size: 88%; } }
 @media (max-width: 680px) { html { font-size: 86%; } }
 @media (max-width: 660px) { html { font-size: 84%; } }
 @media (max-width: 640px) { html { font-size: 82%; } }
 @media (max-width: 620px) { html { font-size: 80%; } }
 @media (max-width: 600px) { html { font-size: 78%; } }
 @media (max-width: 580px) { html { font-size: 76%; } }
 @media (max-width: 560px) { html { font-size: 74%; } }
 @media (max-width: 540px) { html { font-size: 72%; } }
 @media (max-width: 520px) { html { font-size: 70%; } }
 @media (max-width: 500px) { html { font-size: 68%; } }
 @media (max-width: 480px) { html { font-size: 66%; } }
 @media (max-width: 460px) { html { font-size: 64%; } }
 @media (max-width: 440px) { html { font-size: 62%; } }
 @media (max-width: 420px) { html { font-size: 60%; } }
 @media (max-width: 400px) { html { font-size: 58%; } }
 @media (max-width: 380px) { html { font-size: 56%; } }
 @media (max-width: 360px) { html { font-size: 54%; } }
 @media (max-width: 340px) { html { font-size: 52%; } }
 @media (max-width: 320px) { html { font-size: 50%; } }

  • 简单实用的CSS3动画效果 Animate.css

    http://daneden.github.io/animate.css/

    https://sdeno.com/wp-content/uploads/2020/03/Animatecss/Animate.html

    animate

    选择要的效果点击“Animate it”即可，只需要为动画的元素添加指定的class名即可。

     

    还有一种：

    Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似，为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。

    http://demo.htmleaf.com/1708/201708301512/index.html

  • 简单粗俗解释同步和异步

    同步在一定程度上可以看做是单线程，这个线程请求一个方法后就待这个方法给他回复，否则他不往下执行(死心眼)。

    异步在一定程度上可以看做是多线程的(废话，一个线程怎么叫异步)，请求一个方法后，就不管了，继续执行其他的方法。

    比如一个文章系统里面，文章内容通常是字数非常多的，如果数据量大，打开会非常的慢，这个时候可以采取两种方法：

    1、死心眼：一直等待要显示的数据全部取出来

    标题、作者、来源、创建时间、关键字、点击次数、文章正文

    ok，全部取出

    显示

    碰上心急的用户，他会骂死你的。

    2、异步：首先显示能够快速取出的部分：

    标题、作者、来源、创建时间、关键字、点击数

    显示

    然后另外的一个线程等待取出文章的正文显示！

    异步就是：做一件事情的同事，不影响做其他的事情。

    ———————-以上解释来自网络————————–

    下面来说说自己的理解：

    同步：代码严格从上到下执行，只能等上一行代码执行完成了才能执行下一行代码。

    异步：在众多代码中，其中有那么一段是用ajax异步代码写的来获取远程数据，如果获取时间过长就自动跳过ajax那段代码执行下一行代码，直到ajax异步代码获取数据成功后才重新回头执行那段异步的代码。

    回调：回调函数一般是为异步代码提供的，就是因为异步有可能出现超时的情况不按照顺序执行，但又需要在执行某个特定异步代码完成之后马上执行另一个指定的函数，只时候就需要到回调函数了。

     

     

     

     

     

     

  • 数据本地存储Cookies、LocalStorage和IndexedDB

    HTML5 浏览器 内置数据库

    如果想把一些临时数据储存在用户电脑上，可以考虑使用Cookies、LocalStorage和IndexedDB。
    但是三者也有所区别。
    Cookies可以和服务器进行交互，但是传递的数据量很有限。也就KB得大小
    LocalStorage不能和服务器交互，但是存储的数据比Cookies大的多，大概10MB左右，在HTML5中兼容的支持比IndexedDB好的多，同步。
    IndexedDB是HTML5规范里新出现的浏览器里内置的数据库，现在还在规范中，没什么普及，异步。

    indexdb
    浅析IndexedDB存数结构

     

    indexdb2

    IndexedDB跟其他WEB数据库一样都需要建库建表，区别就是IndexedDB使用JS操作这里推荐使用一款插件是为IndexedDB封装好的Dexie.js插件极为便利。具体使用方法参考：

    http://www.dexie.org/

  • web storage和cookie区别以及store.js使用

    本地存储 本地 存储 本地

    Cookie的作用是与服务器进行交互，不可以跨域调用（Cookie可以通过把传值给window.name实现跨域）。
    Web Storage仅仅是为了在本地“存储”数据而生。

    web storage中有localStorage和sessionStorage

    localStorage可以永久性存储数据，只有手动删除。
    sessionStorage临时存储，结束对话就删除。

    使用：

    window.localStorage.key - 取值
window.localStorage[key] - 取值
window.localStorage.key = value - 设置值
window.localStorage[key] = value - 设置值


window.localStorage.setItem(key,value) - 设置值的方法
window.localStorage.getItem(key) - 取值的方法
window.localStorage.removeItem(key) - 移除一个值
window.localStorage.clear() - 清空所有的值

    IE6/7不支持web storage，但是可以使用userData效果跟web storage一样此方法只能在IE使用。

    为了兼容可以使用插件store.js，如果不考虑低版本的浏览器完全可以不使用store.js。

    store.js 对支持localStorage的浏览器使用localStorage，对支持的浏览器（IE<8）使用userData；
    对userData同目录的限制它使用htmlfile和iframe的方式解决，很好的兼容的所有的浏览器。

    使用方法

    store.get('key') - 获取值
store.set('key', 'value') - 设置值
store.remove('key') - 移除一个值
store.clear() - 清除所有的值
store.getAll() - 获取所有的值


store.set('user', { name: 'marcus', likes: 'javascript' })
var user = store.get('user')
alert(user.name + ' likes ' + user.likes)

    尽管如此Cookie也有需要它的地方，Cookie的作用是与服务器进行交互，但不可以跨域调用。

    jquery.cookie.js使用介绍

    Web Storage仅仅是为了在本地“存储”数据而生。

    store.js下载

    Store.js 是一个非常轻量和简单的本地存储框架，如果有更加高级的需求的话，也可以尝试使用更加强大的USTORE.js 或者 Box.js。