您的位置： 首页 >日志>前端技术>详细内容

前端技术

带记忆功能的内容页字体放大缩小

来源：本站原创 发布时间：2016-10-09 08:41:29 浏览次数： 次 【字体：小 大】

记得前段时间我提到咱们系统需要完善用户行为分析这些一块。事实上我们要做好用户行为分析，首先第一步是要做好用户行为记录。

最近正打算买一款小夜灯，后来才发现功能越多，坑就 越 大。其中发现一点特别坑人的是，虽然小夜灯有十档亮度调节功能，却竟只有小数小夜灯带有记忆功能。换句话说我每天晚上打开的时候都需要手动调节一次，一年就要调365次了，这是多么糟糕的体验。
也就是说收集更多的用户行为并记录，然后通过分析提取，这才是大数据时代的智能化。
 
最近在做项目时，发现文章内容页"字体大小切换"这个功能，虽然平时自己也不怎么用，但想到目前2K、3K、4K笔记本越来越多，这个功能可能应用会更广些。总感觉功能上有些不顺手，以前一直没发现，现在想了想，嗯看看能不能帮这个功能加上记忆的效果。
 
第一步，把Cookie写入读取做成一个函数写在脚本里
  1.     //写入cookie 
  2.     function setCookies(name,value) 
  3.     { 
  4.     var Days = 30; //保存天数 
  5.     var expdate = new Date(); 
  6.     expdate.setTime(expdate.getTime() + Days*24*60*60*1000); 
  7.     document.cookie = name + "="+ escape(value) +";expire*="+ expdate.toGMTString();   
  8.     } 
  9.     //读取cookie 
  10.     function getCookies(name) 
  11.     { 
  12.     var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
  13.     if(arr != null) return unescape(arr[2]); return null; 
  14.     } 
 
第二步，网页加载时，获取Cookie
  1.     var curfontsize = getCookies("curfontsize"); 
  2.     var curlineheight = getCookies("curlineheight"); 
  3.     if (curfontsize == null){ 
  4.         curfontsize = "14"; 
  5.         curlineheight = "30"; 
  6.     } else { 
  7.         document.getElementById('fontzoom').style.fontSize = (curfontsize) + 'px'; 
  8.         document.getElementById('fontzoom').style.lineHeight = (curlineheight) + 'px';  
  9.     } 
 
第三步，当触法放大缩小时，保存Cookie
  1.  function fontZoomA() { 
  2.  if (curfontsize > 8) { 
  3.   document.getElementById('fontzoom').style.fontSize = (--curfontsize) + 'px'; 
  4.   document.getElementById('fontzoom').style.lineHeight = (--curlineheight) + 'px'; 
  5.   setCookies("curfontsize", curfontsize); 
  6.   setCookies("curlineheight", curlineheight); 
  7.  }
  8.  }
  9.  function fontZoomB() { 
  10.  if (curfontsize < 64) { 
  11.   document.getElementById('fontzoom').style.fontSize = (++curfontsize) + 'px'; 
  12.   document.getElementById('fontzoom').style.lineHeight = (++curlineheight) + 'px'; 
  13.   setCookies("curfontsize", curfontsize); 
  14.   setCookies("curlineheight", curlineheight); 
  15.  } 
  16.  } 
 
把以上代码替换到内容页相应位置加以调试便完成。
 
除此之外，其实很多用户行为我们都可以通过Cookie进行记录，会发现很有意思。 譬如....
1、用户最近常用搜索关键词
2、最近关注的栏目
3、用户自行设置列表页分页数量
4、记录最后 一次 打开的文章
等等....

 

×

用户登录