X.d 笔记

小Web,大世界

0%

接上面,再补充一些简单图形,利用css3的before和after伪类可以,其实最重要的是思想,不要为实现方式纠结,本人的实现方式肯定是很差的。

DEMO只支持IE10+

上网搜了下别人的实现,发现刚刚弄的几个DEMO完全是弱爆了,先抛开效果不说,就说那个爱心,别人只用一个DIV就搞定了,根本不需要什么拼装。这也是得益于CSS的伪类 :before,:after.

这两个伪类以前也用过,经常是需要在前面或后面插入一段文字的时候用到,如果用来绘图就再牛B不过了,一个DIV可以有三个绘制的区域,每个绘制的区域又可以绘制出任意角度的三角,梯形,及其它圆圈等形状,理论上上次说的除了那个匕首图形外,其它的都可以用一个DIV搞定了。这里先看一段再简单不过的代码

阅读全文 »

记得就在前几年,Google 的 Google Gears 还存在,HTML5 的规范还没完成,使用 Gears 做过几个项目,发现真是个神奇的东西。

现在,不少浏览器已经支持 WebSql,挺简单使用HTML5的数据库API完成一个表进行增删改查,完成原先了在 Google Gears 里才能完成的功能。

代码

html 文件

<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML本地数据库基本使用方法</title>
    <script src="script.js"></script>
</head>
<body>
    <div id="datas">

    </div>
    <input type="text" id="name" /><input type="button" value="增加" onclick="page.addData();">
</body>
<script>
var page=new Page();
page.qryData();
</script>
</html>
阅读全文 »

接上面,基本圆和三角可以后,可以画通过拼接的方式画更多。比如圆环,漏斗,心,饼图等!

DEMO只支持IE10+

CSS3自学笔记2.用DIV画简单的图-续

组合形状

然后,画一个梯形,怎么画,想说两个三角形+一个矩形就OK了,其实刚开始我也是这么想的,于是用三个DIV套,也很容易就套出来了,回头一想,靠,太复杂了,还是三角形的实现原理没学好。

比如,这样一段代码

{
    width:0;
    height:0;
    border-top:10px solid yellow;
    border-right:10px solid green;
    border-bottom:10px solid red;
    border-left:10px solid blue;
}

结果如下:
CSS绘制梯形

阅读全文 »

很多项目都用 Log4j 工具包记录日志,启动的时候也许你不会注意你的日志记哪了。

重装了下机器,把 Eclipse 升了一下,重新打项目,启动,发现很多 log4j 的错,报 file not found.
比较老的版本里面基本都是 {tocmat目录}/logs/mylog下,在 tocmat 的安装目录下建一个 logs/mylog 就能搞定,现在建了发现还是报。

然后发现 eclipse 把 tomcat 自动搭到 workbase 里面去了,在相应目录建了一个,还是报,郁闷!

先看一下:我的 log4j.properties 配置如下

log4j.appender.mylog.File=../logs/mylog/mylog.log
阅读全文 »

CSS3听说已久,其实不知不觉也接触了很多,看过很多DEMO,也大大小小用过一些特性,如圆角等。嗯,都相当简单,就那么几个属性,但看了人家的DEMO纯CSS3实现的效果还是心中一颤,太牛B了,于是乎决定有空自己研究一下CSS3及相关内容,明白原理,不想停留在只懂些简单的概念而没有实践的阶段,本系列不会更新很快的说。。。。

提供个DEMO链接,懒得写-moz-,-webkit-,所以只支持IE10,其实想支持firefox,chorme也是完全没问题的

DEMO只支持IE10+

CSS3自学笔记1.用DIV画简单的图

今天先来看看CSS3如何画简单的图,经常看到别人用CSS3的各种圆角,渐变,旋转,等等特性画复杂度很高的图,实际看源码,发现都是一个一个DIV拼出来的,就先看一个DIV能画什么吧。另外,测试一般都在IE10下进行,写的代码不考虑Chrome,Firefox等浏览器效果,不是因为这些浏览器不好,而是IE10更符合标准,不用加 -webkit-,-moz-之类的前缀,如果想兼容的话,自己把相关的CSS3代码复制一份,然后加前缀吧,就应该可以兼容了。

圆形、椭圆形

这个用圆角就能实现,平时用圆角做按钮什么的都比较熟悉了,画一个圆或椭圆自然不在话下,首页给个

<div class="tuoyuan"></div>

比如我想画个橄榄球的形状,则应该是个扁扁的长方形,然后把边设置幅度就可以了,先设为宽度100,高度60,再看看CSS3的四个属性
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius分别可以给上左上右下左下右设置弯曲度,第一个参数为水平弯曲度,第二个为垂直弯曲度,保持顺滑的椭圆形,就是水平就是宽度/2于是

.tuoyuan{
    width: 100px;
    height: 60px;
    background-color: #B10326;
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
    border-bottom-left-radius: 50px 30px;
    border-bottom-right-radius: 50px 30px;
}

如果是圆形的话,也相当简单,就把width=height就行了。其实后面4句可以用“border-radius:50% 50%;”一句代替。

阅读全文 »

看到 Tomcat7 支持 WebSocket,对于新东西,总是想先趟一趟水,看能给项目增加点光彩。

简单写了一个 Demo,基础部分还是挺简单。

html & JavaScript :

阅读全文 »

公司的产品作到一定规模后,应该考虑一下灰度发布,又称 ABTest

ABTest 并不是一种技术,只是一种产品发布模型,只要你的发布流程满足其中一项条件,就可以称为已经运用了 ABTest.

  1. 在产品上,提供了 体验新版,或 回到旧版 之类的切换功能。
  2. 如果有新版需要发布,可以技术手段让一小部分用户切换到新版,大部分用户还在旧版。
  3. 不局限于两个版本,更多的版本也是可以的,通过技术手段可以自由控制。
  4. (个人见过最变态,但没有测试目的,不能称为ABTEST :scream:),针对个领导专门做个版本,只要是领导的帐号,就直通 领导版,服务器什么的都是独享.

有了ABTest后,可以通过用户在不同版本之间的行为,进行分析产品,得到更好的改进决策。

阅读全文 »

安装非常简单,记录一下操作,非常简单,加上版本号应该可以通用,记录一下,备后用!

先下载libevent和memcached的gz包,下载地址自己去找

cd /usr/local
tar -zxvf libevent-x.x.tar.gz
tar -zxvf memcached-x.x.tar.gz
cd libevent-x.x
./configure --prefix=/usr/local/libevent
make
make install
cd ../
cd memcached-x.x
./configure --prefix=/usr/local/memcached --with-libevent=/usr/local/libevent
make
make install
cd ..
rm -fr libevent-x.x
rm -fr memcache-x.x
rm libevent-x.x.tar.gz
rm memcache-x.x.tar.gz
cd memcached
cd bin -d -m 1024 -p 12001 -u root