boia-CSDN博客

原创【JS】地球节电一小时

今天用CSS3+JS写了个地球节电1小时的效果教程：纪念地球节电一小时预览： http://boia.github.com/art/light.html

2013-03-24 20:16:46 1333

原创【联想面试】面试第一站(带题目和答案)

昨天去联想面试了，发个链接面试第一站—————联想(带题目和我做的)http://boia.github.com/blog/2013/03/06/lenovo/

2013-03-06 20:25:40 3254 3

原创【JS每日练习】阿里巴巴web前端开发面试题

今天在浏览一个网站的时候，找到了阿里巴巴的Web前端面试题，然后自己做了下，跟大家分享一下第一部分：用CSS实现布局让我们一起来做一个页面首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局。第二部分：用javascript优化布局由于我们的用户群喜欢放大看页面于是我们给上一题的布局做一次优化。

2012-04-25 23:23:46 15345 3

原创【JS每日练习】JS写的tab选项卡

今天在某个论坛看到一个选项卡的实例，觉得还不错，自己就试着写了下，代码如下 JS tab滑动门练习 *{padding:0;margin:0;} .tab{width:600px;margin:40px auto;} .item{border:2px solid #000;border-radius:5px 5px 0 0;background:#000;h

2012-04-24 18:46:36 4222

原创【HTML5】（360、联想、腾讯各类手机管家）旋转渐变条

前两天用html5做了一个手机管家上查毒的旋转条，发个教程http://boia.github.io/blog/2013/04/23/process/

2013-04-23 21:18:34 1467

原创 octopress剖析

这里将从最初级的安装开始讲起，然后有哪些好玩的DIY也可以闹闹。1. Octopress初级安装这里讲了基本的安装还有各个软件的配置2. Octopress增加新浪微博侧栏3. 在octopress中加入jsfiddle以后还会继续更新，请关注boia

2013-03-04 16:33:55 630

原创【html5百度地图】简单使用

今天本想着使用下google地图的API，没想到呢，国内这网速又要让我吐槽一番。然后想想，好吧，百度好歹也是国产精英，然后去百度开发者网站看了下，果然不赖，而且和google map用法也是大同小异。geolocation是navigator的一个属性，它是一个地理位置对象，要使用这个对象，首先需要去检测浏览器是不是支持，如果对JS比较熟悉，那么if(navigator.geolo

2012-12-29 21:13:36 6187

原创从0开始计时

JS练习 tt = 0; function clock() { //var tt = document.getElementById("txt").value; tt++; document.getElementById("txt").value = tt; //setInterval("clock()",1000); } 点

2012-04-24 15:49:05 1493

原创【JS每日练习】简单时钟的实现

JS练习 function clock() { var tt = new Date(); document.getElementById("time").innerHTML = tt.getHours()+":"+ (tt.getMinutes()<10?"0"+tt.getMinutes():tt.getMinutes())+":"+(tt.getSeconds

2012-04-24 15:36:42 2611

原创 Canvas globalAlpha绘出透明图形

var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); context.fillStyle = "#ff0"; context.fillRect(0,0,150,150); context.fillStyle = "#0f0"; context.fillR

2012-04-17 22:18:40 3157

原创 fillStroke画出多彩图形

var mycanvas = document.getElementById("mycanvas"); var context = mycanvas.getContext("2d"); //context.fillStyle = "red"; for(var i=0;i<6;i++) { for(var j=0;j<6;j++) { //context.beginPath

2012-04-17 21:43:35 875

原创【Html5每日练习】本地存储localStorage

上一篇博文中讲到了sessionStorage，今天来练习一下localStorage，其实localStorage很简单，只要将对象改一下就行，看代码 var dataArr = []; var ele = document.getElementsByClassName("text")[0]; //利用类选择器获得元素 function setData()

2012-04-14 20:50:34 832

原创【Html5每日练习】本地存储之sessionStorage

Html5很强大，不仅添了新的选择器，而且还加了一个Web Storage，以前使用cookies总让我感到不爽，不过在这里我就侮辱它了，好歹也存活了那么多年了，今天就让我们来领略一下html5的风骚 var dataArr = []; var ele = document.getElementsByClassName("text")[0]; //利用类选择器获

2012-04-14 20:42:09 1404 1

原创【JS 每日练习】实现颜色变换

红:绿:蓝:有趣的颜色变化 function changeColor() { $("font").style.color = toRGB(); } function toRGB() { var red = parseInt($("red").value); var green = parseInt($("green").value); var blue = pa

2012-04-14 16:32:41 1716

原创【Html5每日练习】canvas五彩缤纷的五角星

貌似是很久没碰数学的缘故，今天计算如何绘制一个五角星特别地费力，看来还得好好地学下高数啊，太虚假了~~~不过计算出来后还是有一点小小的错误，有两条边有点误差，大家就凑合看吧，不要见怪 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); //创建

2012-04-14 15:46:30 5289

原创【Html5每日练习】canvas绘制坐标变换图形

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不了变换，今天在网上闲逛的时候看到一个马尾图案，我就试着画了一个，实现的思路应该有两种，但代码却可以有N种，代码如下 var myCanvas = document.getElementById("myCa

2012-04-14 11:36:21 2069 1

原创【Html5每日练习】canvas绘制线性渐变图形

var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var canvasGra = context.createLinearGradient(0,0,0,500); canvasGra.addColorStop(0,"rgba(255,0,0,0.5)")

2012-04-14 10:44:02 1307

原创 CSS选项卡

看到好多大型的网站都会有一些tab选项卡，所以今天就写了一个供大家参考，代码简洁明了，不需要太多的解释，只需要注意一下兼容性问题就行了。看代码 css选项卡练习 div{width:565px;height:220px;} div.tabcard .nav{background-color:#ff359a;width:565px;height:21px;} .na

2012-04-13 21:24:23 2050

原创 windows.event对象详细介绍

1、event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 2、属性：altKey, button, cancelBubbl

2012-04-13 16:12:43 9345 1

原创【Html5每日练习】canvas quadraticCurve二次曲线深入理解

今天在canvas看见两个方法用来绘制贝塞尔曲线，我觉得很好奇，就点开了参考手册的说明，但令我失望了，几乎什么也没有，只有那么一句话，贝塞尔曲线的数学原理超过了本参考页的范围。好吧，看来有些东西就得靠自己，在百度搜索了下贝塞尔曲线，百度文科解释的还是挺透彻的，明白了以后，就开始操作了，代码很简单，如下 var myCanvas = document.getElementBy

2012-04-12 21:12:12 5097

原创【Html5 每日练习】canvas绘制弧形

var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var wise = true; context.lineWidth = 3; context.strokeStyle = "blue"; context.fillStyle = "red"; for

2012-04-12 20:19:56 5216

原创【Html5每日练习】canvas beginPath()的理解

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径看代码: var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); con

2012-04-11 22:46:34 12560 9

原创【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图：代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "#e4e4e4";

2012-04-11 22:05:39 4883

原创【Html5每日练习】三角形路径的绘画

每当心情不好的时候想到的第一件事儿就是写代码，每次写代码的时候总可以在较短的时间忘却一些烦恼，不解释，代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.strokeStyle = "blue"; contex

2012-04-11 20:14:36 3728 3

原创【Html5每日练习】canvas笑脸

在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.strokeStyle = "blue"; context.lineWidth = 5;

2012-04-11 19:59:31 8561 1

前端时间，听周围的朋友和同学说html5不好学，去论坛还有各大网站看，在国内也没有真正地开始发展。也见到了专业好多哥们儿（不是计算机专业）学了一半就放弃了，我觉得也情有可原吧，终归编程也是需要耐得住寂寞的行业，去学一门语言，你要没有毅力去克服初学这道难关，你确实只能处于入门这个阶段，我不算过来人（相对于在这个行业混了十几年的甚至几十年的人来说），记得有一个所谓的过来人跟我说，编程是一个体力活，这点

2012-04-11 19:33:55 1800

原创【html5每日练习】绘制两个重叠矩形（带滤镜效果）

代码很简单，稍微会点canvas的应该就可以看懂 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(50,50,100,100); context.fil

2012-04-11 18:53:57 3721

原创【html5 每日练习】钟表的外观

#myCanvas{border:3px solid blue;} window.onload = function() { var mycanvas = document.getElementById("myCanvas"); var context = mycanvas.getContext("2d"); context.lineWidth = 2

2012-04-10 22:37:39 970

原创【JS每日练习】实现字体循环流动

JS绝对是个强大的语言，我发现已经渐渐喜欢上JS了，学了也有两周时间了，今天实现了一个跑马灯实验，虽然不怎么样，但效果还是实现了，拿出来和大家分享一下 body{background-color:blue;text-align:center;} #text{border:0;background-color:blue;font-size:50px;color:red;}

2012-04-09 22:52:55 1938

原创【html5每日练习】 html5 canvas "米"

上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一步步走过来的，从不懂到精通是需要一个漫长的步骤的，你越急，学的速度反而会很慢，所以这一篇还是画线有关的，有多条线画出一个“米字”，如果你对上一篇的JS代码已经懂得画，你可以不要看我的代码，自己写出来，先贴效图代码不一

2012-04-09 19:35:35 1286

原创【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把握住新时代的潮流，今天开始最简单的html5的学习，画线，画线是动画的基础，可能你会说花点才是基础，的确如此，canvas上的画就是一个个像素组成的。下面是今天写的一个程序，简单易懂 window.onload

2012-04-09 19:14:24 9128

原创迅雷面试第二题(采用滑动门)

今天上午把迅雷的第二题做了些，感觉还是有些收获的，发现了一些问题，先截个图迅雷第二题 *{margin:0;padding:0;font-size:12px;color:#fff} div.menu{width:400px;margin:0 auto;} .menu ul{list-style:none;} .menu ul li{float:lef

2012-04-07 10:58:52 2356

原创迅雷面试第三题

晚上抽出时间把迅雷的第三题做了下，总体感觉还是挺简单的，但是也碰到了些兼容性的问题，先贴图这道题3列等高不是问题，如果用背景图片平铺的话，那就太简单了，可是题目明确不能用背景图片平铺。还有第二个要求说Main列先显示出来，这肯定得用javascript语言实现，当然，这是必须的，你也得让面试官知道你是会javascript的，总不能一直抱着css+div吧，但内方面我没有去写，在浏览器的兼

2012-04-06 21:36:32 995

原创迅雷面试题练习

今天下课后没事在蓝色理想逛了一圈，看到论坛里一个小帖子上有3道迅雷面试题，我打开图片，然后开始做第一题，第一题没什么难度，我就花了点时间做了下，先截个图附上代码第一题迅雷面试第一题 body{margin:0;padding:0;} h4{margin-left:48px;} div ul{list-style:none;} div li{margin-

2012-04-06 12:01:27 834

原创 ubuntu11.10配置Lamp

早上一起来，想了想最近一段时间过得很是劳累，应该用一种什么方式去调整一下心情呢，所以翻开了马广飞先生的《Linux管理与开发使用指南》直接翻到了搭建Lamp服务器那一页，仔细地看了起来，看了两页觉得没有实践就是扯淡，马上进入系统，本想按照书上所说的步骤来搭建服务器的，但马上就发现了蹊跷，书是这样说的第一步单击主菜单的系统|系统管理，最后打开新立得软件管理器命令。我看到这里，就在偷笑，原来就这么简单

2012-04-04 19:25:23 1098

原创 CSS圆角效果

上一篇博文中提到了css2.0的圆角效果，但是没有实现，今天闲着没事儿做了一个，想想还是css3来的痛快，用css2做一个圆角确实还是挺痛苦的，其他不说了，先截个图知道大家感兴趣的不是一张什么都不是的图片，所以给代码控们附上代码：圆角样式#box1{hei

2012-04-04 15:20:49 3584 1

原创一个登录界面

今天浏览网页的时候看到一个挺好看的网页登录界面，自己就模仿了一下，纯粹的web2.0，样式也只是css2.0，先截个图直接附代码：CSS登录界面body{margin:0;padding:0;font-size:12px;}div.login{width:340px;height

2012-04-02 22:37:09 1019

原创 CSS实现背景透明，文字不透明(兼容各种浏览器)

IE6是大家都十分头痛的一个浏览器，为了兼容它，一个很小的项目就可以浪费你很多的时间和精力，最简单的有margin、padding，最难的那就不知道了，今天在这里做了一个滤镜的效果，实现chrome和FF的滤镜很简单，但是要实现IE的滤镜，那就有点繁琐了。背景透明body{margin:0;padding:0;}.back{width:800px;h

2012-04-02 18:47:54 3796

原创面向初学者谈谈position

position毫无疑问属于css2中比较重要的元素之一，懂得如何很好地使用它可以节省在美工上所消耗的时间和精力，但对于初学者来说，position有时也是那么地难于驾驭，所以今天我来谈谈position，只面向初学者。position中有4个值，分别为static | absolute | fixed | relative，从这4词表面的意思来看，一目了然，我们知道static是静态的，ab

2012-04-02 18:33:59 1839

CSS禅意花园(绚丽的效果)

CSS是绚丽网页的基础，这本书是国外一流网页设计大师写的，书中的代码优雅而颇有生趣，图片处理地也很不错，资源你也可以立刻用上

2012-03-30

IIS_VP3.rar所有文件(包括需要复制的dll，chn，exe文件)

用xp的用户都知道安装IIS的艰难，大家提供的都说是完整包，安装的时候总有一大堆需要复制的文件，然后你需要去网上去下载，这里我提供给大家的是我自己安装好的完全解压包，各种安装时候需要复制的文件我都已经下载包括放进去了，提供给搞服务器行业的专业人士

2012-03-28

PS2鼠标+滑轮识别程序

PS2鼠标程序经过STC单片机调试通过，里面有详细的鼠标滑轮程序以及资料，而且可以通过1602显示鼠标坐标位置，可以形象地看出鼠标的动态变化。内部还包含了hex文件，可以直接下载使用

2011-12-25

PS2键盘程序

编码详细，带有所有常用键盘编码，用LCD1602显示，程序经过STC单片机测试通过，上传的文件带有hex文件，直接可以下载使用

2011-12-25

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人