11 2015 档案
摘要:一、需求如下图重点是要实现进度条。二、分析html5新增及删除标签一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用,所以要模拟实现。原理:动态设置的子元素的宽度值。1、简单的雏形假设只有一个进度条,如下,我们只需要知道p元素的宽度,span元素的百分比,相乘即得...
阅读全文
摘要:一、生成数字时钟效果:二、将数字转换为图片方法一:图片名称即数字,用最简单的写法。用到图片:写一个函数strToImg(str)将一个字符串str中每一个数字转换为对应图片,然后动态创建标签。注意:每次调用需清空标签中的内容。方法二:【不适用】如果图片名称不是纯数字,就用一个数组保存起来。本方法操作...
阅读全文
摘要:一、预备知识Math.ceil(); //向上取整。Math.floor(); //向下取整。Math.round(); //四舍五入。Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494Math.ceil(Mat...
阅读全文
摘要:2011年阿里就已经开始在生产环境中使用nodejs. 阿里的技术栈中,Java是最核心的,Nodejs扮演怎样的一个角色? 1、 基础设施大部分采用Java实现,变化较少,有事务要求的Business Services通常使用Java. 2、而Node.js则替代过去PHP/Java Web的场景
阅读全文
摘要:一、用到的图片 二、代码如下,重点是js部分 效果如下: 三、注意事项 1、抽奖过程说明 上面只是前端展示的效果。中奖物品通过一个随机数生成。 真正开发中中奖物品是通过向后端接口发送请求返回的。 2、兼容性说明 .mask开始如下,用的是rgba,但是IE8不兼容,改为使用png图片backgrou
阅读全文
摘要:一、最终效果 二、功能分析 1、需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片。初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示。 效果图是最终效果有做响应式,但这不是重点,不做介绍。 2、html结构分析 #activi
阅读全文
摘要:一、需求点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。二、代码JQuery点击图片查看大图by starof三、技巧需要点击图片中1、2、3、4四张小图分别查看大图,而下面左右按钮切换时是需要同时切换4张小图。因为移动端无法添加热点,最终一个解决方法是使用四个a标...
阅读全文