R·ex / Zeng

音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

分类“开发”下的文章

使用 D3.js 制作我们的 Todolist！

算了一下，跟平儿在一起也有八个月了。作为一个程序员男朋友，自然会想写一些东西来提升我们之间的好感度。之前在网上看到有人做了一个特别炫的页面，其实从技术上来说，只是若干图片算好位置、有个计时器、有个打字的效果就解决了。作为一个偏向技术的人，我肯定要写一个更高大上的效果！于是就想到了写一个 Todolist，专门记录那些我们之前在聊天记录中提到过但一直没有做的事情，例如看一场恐怖片啦，躺在地上数星星啦……灵光一闪，就想用一堆浮动的圆圈来代表每一件事情，最好是可以用鼠标拖动的，圆圈最好可以自由移动，如...
2016-07-24 00:59 开发

使用 HTML+CSS 制作纸飞机新 Logo 动效

本文已同步至纸飞机技术博客：使用 HTML+CSS 制作纸飞机新 Logo 动效看到蓝湿父设计的纸飞机新 Logo，感觉比原来的逼格高了好多，于是灵光一闪想出了一个动效，然后脑子一热就想用 HTML+CSS 来实现。先附上最终效果好了：纸飞机 Logo 动效测试那么接下来就一步步来吧！Step1：确定 HTML 结构左边 Logo 的五条线我打算用五个 <div> 来绘制不同颜色的长条，然后用 CSS 做二维变换，变成一个正着的飞机，最后整体逆时针旋转 40° 达到最终效果。右边的文...
2016-06-12 21:29 开发

一次在 Openshift 上折腾 PHPMailer 的经历

本篇已同步至纸飞机技术博客：一次在 Openshift 上折腾 PHPMailer 的经历因为 SAE 太坑，所以我还是把纸飞机的微信和办公系统迁移到了 Openshift 上，并使用了百度云加速。问题就出在这里：我知道要修改 SAE 的一些特性，例如 SaeSegment、SaeCounter，但是没想到还漏了一个 SaeMail，于是服务部的小伙伴们结束维修发邮件的时候就提示 500 了。好吧，那我就改成自己的 Mail 服务呗，到网上下了一个 PHPMailer，然后填好设置，本地测试通过...
2016-06-01 20:03 开发

纸飞机2015新生聚会技术方面总结

聚餐完之后大家都十分兴奋，兴奋完了之后，好好总结一下这次晚会上的技术性成果和失误。今天晚会上的技术性问题有：飞机墙、抽奖、电子节目单。下面分别从每一点来说明。飞机墙飞机墙延续了新飞机墙一贯的风格——六格文字+3D星空背景+卡片翻转特效。此次飞机墙没有任何创新点，但是将原来的随机选择方块替换内容换成了按照顺时针顺序选择方块替换内容，看起来更正常了一些。飞机墙最大的技术性失误是忽略了新生们对于刷墙的热情。在测试的时候没有问题，但是对于前十分钟1000多条的速度还是没有事先预料到。首先，服务器的网络性...
2015-09-04 02:19 开发

【教程】不用JS实现鼠标移过的下拉菜单效果

兼容性：IE≥7（本机无IE6）难度：简单说来惭愧，我一直在用JS来写下拉菜单，一直到去年的10月份。前一阵有同学问我能不能不用JS，我想了想，还是有空写一段吧。【效果演示（可能丑了点）】【实现过程】首先要知道一点知识：鼠标在子元素上的时候，父元素的:hover是开启的。先按照一般的思路写好菜单的HTML框架，本例使用ul和li来制作菜单：<ul> <li>菜单</li> <li>1</li> <li>...
2015-02-16 15:55 开发

【mark】移动前端不得不了解的html5 head 头标签

原文地址：移动前端不得不了解的html5 head 头标签 - WEB前端开发看到一篇好文章，留着备用。<!-- 使用 HTML5 doctype，不区分大小写 --> <!DOCTYPE html> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> <html lang="zh-cmn-Hans"> <head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> ...
2015-01-12 19:58 开发

用SAE的Counter减少云豆消耗

刚开始写纸飞机的办公系统，里面有两个地方需要实时更新：维修队列和签到列表。后台用的是PHP嘛，所以前台肯定是用AJAX轮询了。刚开始接触AJAX不久，于是就很脑残地想到了一个思路——每隔3秒AJAX一次，每次返回一个完整的列表信息，然后前台用innerHTML更新。很凶残很暴力，后果嘛——每天云豆消耗大概在20~40左右吧。后来尝试压缩xhr的请求和返回数据大小，发现效果不明显。直到我有一次特意看了看云豆消耗……于是心里十分地卧槽……赶紧想办法减少一下数据库的消耗吧。首先，数据库语句好像没什么可...
2015-01-11 18:24 开发

网页编程心得：语义元素 & 结构、样式和行为的分离

绝大部分的 HTML 标签是有语义的。例如 <p>（paragraph）表示段落，<a>（anchor）表示锚，<abbr>（abbreviation）表示缩写。为什么要有语义？这是显然的，因为 HTML 是用来描述网页文档的一种语言，我说“这里有个标题”，那么 HTML 中应该就是用 <h1> 标签把标题括起来。有同学会问，我把某个 <p> 的文字样式调成加粗、大号字，不是照样能显示出标题效果吗？整个网页都用 <p>，抛弃...
2014-09-29 23:35 开发

让SVG做背景，可随元素大小而变化

刚刚遇到了这么个问题：我用 SVG 作为 <div> 的背景，但是 SVG 不随 <div> 的大小而变化，即使我设置了 background-size: 100% 。从 Stack Overflow 上也没搜到什么好的结果，最终还是自己摸索出来了。在你的 <svg> 标签中加上这些：<svg preserveAspectRatio="1" viewBox="0 0 100 100" xmlns="htt...
2014-07-29 23:46 开发

【教程】用JavaScript控制CSS规则

兼容性：IE≥9难度：中等有时候网页要适配多种分辨率，我们自然想到用百分比来控制大小。但是百分比不是万能的。例如，你想让一屏幕显示十行表格，但是你并不知道屏幕有多高，因此需要用 JavaScript 的 window.innerHeight 获取屏幕高度。但是如何修改 CSS 呢？第一种方法：直接设置某元素的属性document.getElementById('xxx').style.height = window.innerHeight / 10 + 'px�...
2014-07-29 23:10 开发

【JS教程第二篇】树型的文档

本篇需要对HTML文档结构和JavaScript语法有基本了解。之前写HTML的时候，有没有觉得整个文档结构有点层次感呢？例如，<html>包含了<head>和<body>，前者包含了<title>，后者可以包含好多东西；一个<div>中可以包含若干个<span>或者<p>，它们之间又有什么先后顺序呢？事实上，HTML文档就是一棵树。我们来看下面这个HTML文档：<html>     <head...
2014-06-17 01:10 开发

【JS教程第一篇】语法当先

本篇内容需要读者对HTML有基本的了解。JavaScript（今后简称JS）是运行在用户浏览器上的一种脚本语言，它可以动态改变网页的内容，以及让网页与用户有交互。JS与Java可没有任何关系，要是硬扯关系的话，它俩就像雷锋和雷峰塔一样。JS可以嵌在HTML文档中，也可以单独写成一个文件然后嵌入HTML，推荐使用后者。打开你喜欢的纯文本编辑器，新建一个文件，保存为【文件名.js】，然后在head标签里加上这么一条：<script src="你的JS文件路径"></script&g...
2014-06-15 20:50 开发
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

这是我们共同度过的

第 3090 天♥