软软的上嘴唇
分享5个有趣的 JavaScript 代码片段
展开Biu

本帖最后由 软软的上嘴唇 于 2012-8-4 15:32 编辑

JAVA和JS不应该放在一起,只是都有一个JAVA而已,是两种不一样的语言啊

@羞怯的渣白君,@氺菓, @风音洛洛

分享5个有趣的 JavaScript 代码片段

作者:山边小溪

出处:http://lhb25.cnblogs.com

欢迎任何形式的转载,但请务必注明出处。

很多人认为编程语言只是用于工作,没有什么乐趣,其实,只要我们发挥奇思妙想,再死板的东西也有有趣的一面。这篇文章告诉大家:使用JavaScript,可以做很多很多有趣的事情。以下代码拷贝到地址栏回车即可运行,赶紧试试吧。

1. 网页射击游戏这个游戏可以在任何网页里面玩,把下面代码粘贴到地址栏回车,按空格键进行射击,W键可前进,A、D键或者方向键可改变射击方向。

javascript:var%20s%20=%20document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0);

2. 让图片飞起来只要把下面的代码贴到浏览器的地址栏里然后按Enter键,当前网页的所有图片都将动起来。

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; var DI= document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5+"px"; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5+"px"}R++}tag=setInterval('A()',5 );document.onmousedown=function(){clearInterval(tag);for(i=0; i<DIL; i++){DI.style.position="static";}}; void(0)

这个好有趣的

3. 让网页可编辑此JavaScript代码,可以让你实时修改任何的网页,在Firefox中,你甚至可以把修改的网页保存到起来,对于网页设计者来说,这个功能可以辅助完善页面效果。

javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

4. 让浏览器抖起来改变浏览器窗口尺寸到普通模式,可能半屏的效果是最好的。把下面的代码贴到地址栏,按Enter键(貌似只有IE有效果)。

javascript:function Shw(n) {if (self.moveBy) {for (i = 35; i > 0; i--) {for (j = n; j > 0; j--) {self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0); }}}} Shw(6);

5. 地址栏计算器哈哈,这个以前还真不会想到,地址栏就是个计算器嘛。

javascript: alert( 4 + 5 + 6 + 7 + ( 3 * 10 ) );

[查看全文]
至尊麻辣螃海
[Jquery][分享]简单实用滚动插件Roundabout介绍
展开Biu

本帖最后由 至尊麻辣螃海 于 2013-8-20 11:07 编辑

Roundabout是一款非常实用而且强大的插件,这款插件可以在页面上生成一个强大的旋转效果,能够将一组静态HTML元素转换成可以灵活定制具有类似于转盘旋转效果的交互区域。有多种旋转形状可供选择,而且使用起来十分容易上手,但是经过个人实践,CSS+DIV和Jquery的初学者使用起来可能会遇到一定的麻烦(我也是初学者,已经被虐),这个分享的主要内容基本上就是把官网上面的官方说明翻译一下能够让更多人看明白与理解,然后使更多人能享受到这款强大的插件。

这里是官网地址:http://fredhq.com/projects/roundabout/

这里是插件在线演示地址:http://www.gbtags.com/gb/demoviewer/790/b2607beb-0af8-4af2-9576-efd23eff9d07/index.htm.htm

好的,正式开始介绍了:

首先,你需要一个普通的HTML页面,要运行Roundabout需要Jquery框架

在 *本站禁止HTML标签噢* </head>标签之间输入以下代码

你可以使用本地的Jquery:

[mw_shl_code=html,true]<script language="javascript" src="../js/jquery-1.10.2.min.js"></script>[/mw_shl_code]

也可以从多个公共服务器中引用(但是如果电脑没有联网的话就没有效果了):

[mw_shl_code=html,true]<script type="text/javascript" src="http://ajax.googleapis. com/ajax/libs/jquery/1.8/jquery.min.js"></script>[/mw_shl_code]

然后需要载入Roundabout插件:

[mw_shl_code=html,true]<script language="javascript" src="../js/jquery.roundabout-1.0.min.js"></script>[/mw_shl_code]

下载地址:https://github.com/fredhq/roundabout/zipball/v2.4.2

这样最基本的准备就完成了,接下来是html代码部分,Roundabout插件主要是通过 *本站禁止HTML标签噢* 标签和 *本站禁止HTML标签噢* 标签来作用的,在 *本站禁止HTML标签噢* </body>部分输入你需要旋转的列表:

[mw_shl_code=html,true]

*本站禁止HTML标签噢*

*本站禁止HTML标签噢* </li>

*本站禁止HTML标签噢* </li>

*本站禁止HTML标签噢* </li>

*本站禁止HTML标签噢* </li>

*本站禁止HTML标签噢* </li>

</ul>

[/mw_shl_code]

*本站禁止HTML标签噢* 标签的部分就是之后旋转效果里面旋转的主要部分了,这里可以放各种静态HTML元素,比如图片文字。

Script:

[mw_shl_code=javascript,true]

*本站禁止HTML标签噢*

$(document).ready(function() {

$('ul').roundabout();

});

</script>

[/mw_shl_code]

这里就是调用Roundabout插件的代码了,这里默认的选择器是‘ul’,如果在页面中有其他带 *本站禁止HTML标签噢* 标签的元素的话,可以在需要变成滚动特效的ul标签上加上一个ID或者Class,然后把选择器改为对应的ID或者Class就好了。

为了使Roundabout运行地更好以及表现地更漂亮,还需要一些CSS代码:

[mw_shl_code=css,true]

*本站禁止HTML标签噢*

.roundabout-holder {/*这个是整个旋转特效的容器,height和width属性可以调整旋转特效的范围*/

list-style: none;

padding: 0;

margin: 0;

height: 5em;

width: 5em;

}

.roundabout-moveable-item {/*这个是每个旋转元素的属性*/

height: 4em;

width: 4em;

cursor: pointer;

background-color: #ccc;

border: 1px solid #999;

}

.roundabout-in-focus {

cursor: auto;

}

</style>

[/mw_shl_code]

接下来一个简单的Roundabout特效就做好了:

稍微修改一下CSS属性,就能变成比较好的效果了:

进阶:

在javascript代码里加上这样一句:

[mw_shl_code=javascript,true]

*本站禁止HTML标签噢*

$(document).ready(function() {

$('ul').roundabout(

{

btnNext: ".next" }

);

});

</script>

[/mw_shl_code]

在 *本站禁止HTML标签噢* </body>里面添加一个连接:

[mw_shl_code=html,true]<a href="#" class="next">Next</a>[/mw_shl_code]

这样就做成一个可以控制元素旋转的按钮了:

通过这两个插件还能实现拖拽功能:

[mw_shl_code=html,true]<script src="jquery.event.drag-2.0.js"></script>

<script src="jquery.event.drop-2.0.js"></script>[/mw_shl_code]

[mw_shl_code=javascript,true] *本站禁止HTML标签噢*

$(document).ready(function() {

$('ul').roundabout({

enableDrag: true

});

});

</script>[/mw_shl_code]

下载地址:

Drag:https://github.com/downloads/threedubmedia/jquery.threedubmedia/jquery.event.drag-2.2.zip

Drop:https://github.com/downloads/threedubmedia/jquery.threedubmedia/jquery.event.drop-2.2.zip

如果觉得一般的滚动特效不够好的话还有很多滚动款式能够选择,这里需要一个“jquery.roundabout-shapes.js”文件,下载地址:https://github.com/fredhq/roundabout-shapes/zipball/master

[mw_shl_code=html,true]<script src="jquery.roundabout-shapes.js"></script[/mw_shl_code]

然后这样就可以改变滚动样式啦:

[mw_shl_code=javascript,true] *本站禁止HTML标签噢*

$(document).ready(function() {

$('ul').roundabout({

shape: "teardrop"

});

});

</script[/mw_shl_code]

这里是滚动样式演示:http://fredhq.com/projects/roundabout-shapes

简单的介绍就到这里啦,这些就是一些简答的使用技巧,Roundabout插件还有更多强大的功能等着大家去发掘,我也是在学习中的小透明,发一点心得和大家共享,以后还会发类似的帖子,期待大家的支持和鼓励。

源文件下载:

[hide=d30][/hide]

该贴已经同步到 至尊麻辣螃海的微博

[查看全文]
China-Lyz
不是用来布局的
展开Biu

实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事。反过来,table布局的时候经常依赖于CSS定义一个单元格的布局属性,所以可以说是table+CSS布局。也就是说,我们讨论的两种主流布局方法应该是纯CSS布局和table+CSS布局,如果你觉得你在用的是div+CSS布局,那么有可能你也有强迫症了。

  接下来我们说说如何进行纯CSS布局,因为CSS布局依赖于XHTML,所以我们先要说说如何书写一个CSS无关的XHTML。其实书写CSS无关的XHTML并不难,虽然你不能再好像书写table布局代码那样集中精力于最重的视觉效果上,但其难度也不过是中学生写作文那样。

  中学生写作文如何写呢?首先看看题目,然后想想整篇文章分为哪几个大的段落,每个大的段落说些什么,能够把你要说的东西说清楚。对于XHTML来说,这相当于用div把文档切割为几大块。这时候你不要想着这些div将构建一个怎样的DOM啊、CSS如何选择DOM中元素设置规则实现布局之类的事情,就大概划分一下文档的大区域就好了。

  然后当然是用一些常用的手法来表现感情或者论证问题,这在XHTML中就是用特定的元素来完成一些常见的信息组织。下面就是信息组织形式与元素的对应列表。

  img

  作为内容的图片是一定要放到img里面的,这没有更好的选择了。然而如果图片不是作为内容,而是作为修饰性的,则千万不要用img。对于非内容的图片,应该在CSS中引用,而不在XHTML中出现。例如每一个导航链接有一个前导的箭头指示,那么这些箭头就应该通过CSS的background-image属性加上去,而不是直接作为img出现。

  a

  这也是一个非常准确定义的元素,链接都需要使用它。或许已经有很多人忘记了a的本意是锚点,其实这是一个十分有用的语义,你可以用它来标记文档中一些重要的引用位置。

  ul, ol

  ul和ol分别是什么意思呢?如果你回答不上来,却知道它们可以用来干什么,那证明你是被可视化工具宠坏了,要转换过来编写符合语义的XHTML需要先补充基础知识,这时候你最好先找一些看起来非常基础非常全面的XHTML书籍看看,因为没有扎实的基础你在上面构建更多的知识都是不牢固的。ul和ol其实分别代表unordered list和ordered list,也就是无序列表和有序列表。在语义上,它们都用于表示一类并列关系的内容,例如我们去商店购物之前列一张shopping list,上面要买的东西就是并列关系,在中文可以用顿号隔开那种。它们的差别在于是否有顺序,例如shopping list是没顺序的,先买什么后买什么是没关系的,但是一份旅游行程安排上面的景点列表却是有游览的先后顺序的。

  ul常用于导航栏,因为导航元素符合上面所说的并列关系,树状导航结构还可以通过嵌套ul来表述。在这里,导航可以是我们常见的水平或竖直导航栏,甚至可以是地图导航,例如在中国地图上不同的省份热区其实是不同的li。如果我说,在主流浏览器上用户看到了中国地图和可以直接点击省份热区,在不支持CSS的浏览器上用户能看到一份纯文本的省份名称列表,使用的是同一份XHTML,而这完全通过CSS实现,甚至不依赖于JavaScript,你相信吗?

  另外,如果你要显示一个图库的缩略图,这些图片也可以放在ul中哦,因为这些图片也是并列关系。它们可以自动先横排,排满一行就自动排第二行,CSS可以让他们乖乖排队,而不需好像table那样把图片定死在一个格子里。其实table用于布局就如同用监狱关押内容一样,把内容锁死在一个格子里不让它到处乱跑;符合语义的XHTML就如同一个开放的舞台,你只要懂得利用CSS的规则,内容就自然会找一个适合表现自己的地方站着。

  dl

  没有听说过dl吗?因为那些可视化工具生成的代码中从来不会出现dl?dl的意思是definition list,也就是定义列表。它包含的子元素不是li,而是dt和dd,也就是definition term和definition description。dl本身设计为字典单词与解释列表这样的语义,例如:

Apple

苹果

Boy

男孩

然而,如果你需要表示的的语义也是类似的,一个列表既包含定义也包含解释,那么也可以考虑用dl。

  form, input

form也就是表单啦,这没什么好说的,就算再不顾及语义的人在书写XHTML时也会考虑到它与各种input对提交数据的影响,从而小心谨慎。

  table

table自然是用来表示表格的,这不废话!如果是数据表,当然可以用table来表示,但如果不是,就最好别用table了。

人名列表呢?例如一个3行4列的人名列表。如果这12个人名是并列关系,我建议你用ul和12个li来表示,再通过CSS来让它们在一行内并列显示多个。名片表呢?也就是3行8列,每两列中左侧一列显示人名右侧一列显示电话地址等联系方式。我觉得dl在一定程度上能满足此需求,dt放人名,dd放联系方式,不过这时候就涉及了dl滥用的争论,因为人名与联系方式当作定义与解释有点牵强。

接下来还有一个关于你是否系统学习过XHTML的小提问,那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary属性分别用于定义什么,还有就是你书写table时是否会使用thead、tbody。

  div, span

再次审阅上面的列表,如果你需要表示一个块区却无法在上面找到更适合的元素,那么你就可以考虑使用div和span这两个最没有语义的元素了。div与span的区别,历史上的不说了,现在通常大块的区域用div,行内的小文本片段就用span。在上面我已经说了div一般用于全局划分为几个大的区域,所以一般不需要使用了。span其实也很少使用,因为行内的强调通常可以用语义更强的元素例如strong和em。

在理解上上述那么多常用元素后,写一个XHTML就真的如同中学生写作文一样容易啦,还是搭积木那样,其实和以前使用可使化工具搭积木没什么不同,唯一不同是现在你理解了你在搭的是什么,而以前你只在乎搭出你想要的视觉效果来。写代码与写作文所类似的地方,就在于你写得越多就越熟练,也就越能写出好东西来。在写好XHTML后我们就要开始考虑如何写CSS了,或许还需要在XHTML中略作修改以方便CSS中规则的选择与匹配,不过这是以后再说的内容了,今天就说到这里。

[查看全文]
Blast暮天
【暮天资源】知识汇总图「包括Linux、HTML5、java、MySQL、PHP」
展开Biu

本帖最后由 Blast暮天 于 2013-1-15 13:45 编辑

别看这个了、看我的新帖!戳这里->【总合集】C、Linux、ARM、Qt、各大公司笔试面试

网上找到的一些关于Linux、HTML5、java、MySQL、PHP、前端、CSS3、Android等等的一些框架啦、指令汇总啦、常见错误啦、算法啦、协议啦~分享给大家看下~#7193!

本内容已隐藏,回复后刷新可见哦

[查看全文]
马赫的权杖
PHP代码怎么样创建ZIP格式文件的技巧简单样例
展开Biu

这篇PHP创建ZIP档案文件指南就是关于这样一种文件格式的,可能应用程序开发者几乎每天都会遇到这种文件:ZIP格式。一般这种格式是用来通过电子邮件和远程连接传输文件的,能够将多个文件压缩到一个档案文件中,因此,减少了文件的硬盘占据空间,并且能够更容易地移动它们。PHP通过它的ZZipLib插件和PEAR的Archive_Zip类都可以读取和创建这些ZIP文件。

我将假设您已经有了正常运行的Apache,安装了PHP,并且PEAR Archive_Zip class类已经正确安装了。

注意:您可以直接从网上安装PEAR Archive_Zip程序包,要么下载它,还可以利用提供的指示。

PHP创建ZIP格式文件http://www.125pc.com/

让我们从一个简单的例子开始:动态地创建一个包括几个其他文件的ZIP档案文件。以列表A中的脚本开始。

列表A

< ?php

include ('Archive/Zip.php');

// imports

$obj = new Archive_Zip('test.zip');

// name of zip file

$files = array('mystuff/ad.gif',

'mystuff/alcon.doc',

'mystuff/alcon.xls');

// files to store

if ($obj->create($files)) {

echo 'Created successfully!';

} else {

echo 'Error in file creation';

}

?>

以上就是PHP创建ZIP格式文件编程技巧样例

(责任编辑:电脑学习网)

[查看全文]
siete_
10 款非常棒的CSS代码格式化工具推荐
展开Biu

软软的上嘴唇 发表于 2012-2-10 12:14:56 |显示全部楼层

本帖最后由 软软的上嘴唇 于 2012-2-10 12:17 编辑

如果你刚开始学习CSS,这意味着你的很多代码或结构可能需要优化,比如你可能过多使用了类、添加了多余的间隔或空行等等,这将导致代码臃肿、混乱,可读性和执行效率将大大降低。

本文为你整理了几款CSS工具,借助它们,你可以轻松写出漂亮的CSS代码

1. CSS Lint

这是一个在线工具,可以帮助你检测CSS代码中的问题。该工具可以对一些基本的语法进行评估,并使用一套规则,以寻找有问题或效率低的代码。

2. CSS Compressor

这是一个有用的工具,可以帮助你压缩CSS,以提高加载速度和优化网站。该工具提供了三个压缩级别,主要依据可读性与压缩的关系进行分级。当然,你也可以切换到高级模式以设置更多的参数。

3. ProCSSor

这是一个伟大的免费工具,可以以你想要的方式为CSS代码添加格式,并优化你的CSS代码,使其更加轻量且易读。

4. Easy CSS Styler

这是一个可视化的CSS代码生成器,你只需要选择你想要的样式、形状和大小即可。你可以很方便地下载或复制自动生成的CSS代码,并应用在你的网站中。

5. Styleneat

一个CSS代码处理器,用于组织和标准化你的CSS代码。还可以按照CSS属性和选择器的字母顺序进行排序。

6. PCSS

一个基于PHP5的CSS格式化工具,可以帮助开发者编写更好的CSS代码,部分功能包括类嵌套、服务器端细节、默认单位和变量等。

7. Normalize

这是一个可定制的CSS文件,可以让现代浏览器一致地渲染所有的元素。该工具可评估主要浏览器之间的不同,以便精确检测到需要标准化的元素。

8. CSS Pivot

使用CSS Pivot,你可以添加CSS样式到任何网站,并可以使用一个短链接向其他人分享这些结果。

9. PrefixMyCSS

PrefixMyCSS非常易于使用,并会为你节省大量写代码的时间。它可以自动为CSS代码添加必要的属性。粘贴你的代码到左边的框中,点击“prefix”就会自动为CSS代码添加必要的前缀。

10. CSS Prefixer

CSS Prefixer无需多说,它可以帮助你轻松地为CSS添加格式,只需粘贴你需要增强的代码即可。

本文由 站酷网 - thanksz 原创,转载请保留此信息,多谢合作。

[查看全文]
siete_
排查网页出错小方法
展开Biu

软软的上嘴唇 发表于 2012-2-10 12:26:52 |显示全部楼层

本帖最后由 软软的上嘴唇 于 2012-2-10 12:26 编辑

宽度计算失误是浏览器兼容最常见的问题,最好是把padding border宽度都减掉。

最好把margin padding border全设置为0 需要时再进行设置即可

来源:站酷

[查看全文]
lmj0708
JavaScript编程游戏——CodeTank(代码坦克)用游戏来学习 Java
展开Biu

本帖最后由 lmj0708 于 2013-2-16 19:04 编辑

代码坦克 (CodeTank) 是一个相当有趣且极具挑战性的编程对战游戏,它提供一个平台让你用 Javascript 语言编写属于自己的坦克机器人,并与其他人的坦克进行战斗!因为游戏是不能直接操控坦克的,你需要用代码和算法来让你的坦克自己动起来,让它学会如何移动/躲避、如何攻击,甚至实施更复杂的战术。总之,就是想办法让你的坦克更聪明更具战斗力。

CodeTank 旨在让你乐在其中地学习 Javascript 开发并提高编程水平,你甚至还能接触到更多人工智能的知识。它免费开源,本身基于 HTML5、CSS3 等 Web 新技术构建而成,直接在浏览器即可编写代码运行并直接与其他选手进行战斗。相信对广大程序员朋友来说,这游戏可玩魅力无限啊!其他神马网游都弱爆了,快来编写自己最强的坦克,战个痛快吧……

说到 Code Game (编程游戏),相信较多人曾经听过/玩过的应该是 Robocode 吧(它同样是坦克对战),几年前它在国内也着实火过一把,当时可谓让人大开眼界。很多人没想到,枯燥的编程代码可以变成如此有趣的对战游戏。不过 Robocode 使用的是 Java 语言,而这次的 CodeTank 则是 Javascript。(注:Java 跟 Javascript 只是名字相似,但实际上除了语法相似两者几乎毫无关系,并且用途也完全不一样,很多新手会混淆它们)

代码坦克与通常玩的游戏不同的是:玩家需要使用 Javascript 对坦克机器人进行编程,通过给机器人设计智能的代码逻辑来指挥它探测敌人、发动攻击、躲避炮弹等等,而不是由键盘、鼠标直接控制。使用几行简单的代码,就能够让你创建一个活生生的坦克机器人(TankRobot),一个真正的在屏幕上与其他机器人互相对抗的智能机器人。

坦克机器人除了可以灵活行走的坦克车身(Body)外,还配有雷达(Radar)火炮(Gun),玩家在探测对手、攻击对手的时候,还需要躲避对手的进攻,在有限的能量消耗殆尽前看谁先把对方消灭,最终以击中目标和未被对手击中的次数来衡量得分的多少。

由于涉及的知识面和资料较多,本文就不直接教大家如何编写坦克进行战斗了,有兴趣的朋友可以参考一下下面的一些资料来尝试编写。如果你有 Javascript 的基础基本上很简单,纯新手的话,也可以先了解一下 JS 的语法,然后摸索着一步一步慢慢来。

代码坦克 (CodeTank) 提供给广大初学 Javascript 的开发者一个新选择,通过 CodeTank 可以非常有趣的开始学习和提高 Javascript 水平。对于爱学习的同学,空闲时玩玩这个游戏绝对要比玩一般的网游有意义得多。腾讯此次推出的这个 CodeTank 虽然 idea 是跟 RoboCode 一致,但用 WEB 和 Javascript 来实现也算是不错的创新。这是一场属于程序员之间的战斗,你准备好了没?

传送门:

本内容已隐藏,回复后刷新可见哦

还有一个游戏,是java的,传送门~:

Robocode 用Java来玩游戏

https://www.gn00.com/t-230571-1-1.html

[查看全文]