4月 262016
 

在安装好了express和socket.io,下边就开始实战了。程序包都在node_modules下,如图:

先看下这篇文章:http://www.plhwin.com/2014/05/28/nodejs-socketio/

再来说说具体的操作:

1,建立服务器代码。在npm目录下。也可以在其子目录下。所以,为了多项目,为了方便管理,所以先建立一个servers目录,在servers下建立一个chatroom目录。在chatroom中建立服务器文件,index.js。index.js中注意listen的端口。服务端代码可以完全复制上边那边文章的。代码写好了,然后node一下。如图:

2,服务端代码建立好了。就开始建立client端代码了。在html中,要嵌入socket.io.js和客户端的交互服务器端的js。如果没有服务器,又想在局域网内测试。我们使用本地ip地址。记得,嵌入socket.io.js的端口地址是服务端listen的端口。而html,css,js这些使用的是自己电脑web服务器的端口。在js中,也有连服务端的地址。那个端口也是用服务端listen的端口。客户端代码,依然一模一样copy上边文章中的代码。将端口和路径修改对了即可。

3,总结以上。需要创建的文件有:index.js(服务端文件),index.html,style.css,client.js。这些都完毕了。一个简单的聊天程序就可以跑起来了。在局域网,把你的地址发给小伙伴们,就可以开始聊起来了。如图:

 Posted by at 下午10:30
4月 262016
 

Node.js是啥,能做啥,怎么样。

Node.js怎么安装。怎么安装呢。先去官网(https://nodejs.org/en/download/),根据自己的系统,下载所需。

然后向安装普通软件一样安装,一路next。 也许,next到最后一步,发现出问题了,next不下去了。就是进度条提示:roll back,because of a error.node.JS setup wizard ended prematurely 如图:


Continue reading »

4月 252016
 

在时间就是生命的时候。拿来主义蛮好的。省去了很多力气和时间。地点的三级联动,这里用的就是腾讯的。

http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动,图下:
查看其源代码,发现了其引用了一个geo.js。地区数据全部在里边,还包含了查询遍历的一个方法。在html页面中,也找到了使用geo的方法。

结合bootcss的样式,一个比较好看的三级联动实现就好了。图如下:

注意,在html页面,select的id命名必须是s1,s2,s3。option空着。初始化调用setup();默认带一个第一级地区,使用preselect(‘上海市’);显示选择结果,调用promptinfo();前边两个方法是geo.js中的,最后一个是自己定义的。如下边code:
Continue reading »

4月 212016
 

网页中,h5app中,字体icon的图标的使用,非常多。好处也当然比img多好多。 比如:组合图片和文字,改变颜色,大小等。

不过,请看这个网站:http://iconfont.cn/在线使用库里已经存在的很多很多icon。支持在线编辑。然后还能在线保存和下载。其使用方法也非常方便。

下边几篇文章其相关的字体icon的使用。

http://ask.dcloud.net.cn/article/128

http://www.gbtags.com/gb/share/4489.htm

http://www.jb51.net/article/77422.htm

https://icomoon.io/app/#/select

http://www.uisdc.com/make-the-font-icon

http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/

4月 192016
 

bootstrap的日期插件非常棒,好看,好用。
想要的点过来:http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201503041458.html

写个额外的东东。居中。当想将%比和具体像素组合居中的时候。可以定义两次div。

第一层div,比如:先做一个,距离左边div 50% 的距离。
第二层div,再左一个,距离自己宽度一半的像素距离。不过这个距离是负值,具体表现就是向左边移动了自己宽度的一般距离。这个宽度,自己是能够知道的。

css code是这样的:

    <div style="margin-left:50%">
        <div style="margin-left:-200px">
            XXXXXXX
        </div>
    </div>
4月 182016
 

哎呀呀呀。bootstrap框架的modal经常会被用到。比如弹出注册登录框。不过,在弹出窗口的时候,没办法垂直居中。网上有一些解决方法,不过,修改最少,体验最好的就是修改bootstrap.js的源码。这个等会说,先了解下bootstrap modal。

这里有介绍:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
Continue reading »

网站地图