功能： 单击单元格选中，选中过程中使用方向键更换选中的单元格，选中过程中按回车键或者直接双击单元格进入可编辑状态，单元格失去焦点时保存修改的内容。 主要实现思路： 选中，移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时，在单元格上面添加个input输入域，动态的更新数据源代码： HTML代码： 代码如下: Item1 Item2 Item3 arthinking Jason itzhai arthinking Jason ...
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码，非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript结合html5 canvas实现的涂鸦板</title> <meta name="Copyright" content="JavaScript分享网 http://www.gxlcms.com/" /> <meta name="description...
小试牛刀，实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为： 1.反色 2.灰色调 3.模糊 4.浮雕 5.雕刻 6.镜像滤镜原理解释： 1.反色：获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b) 2.灰色调：获取一个像素点RGB值r, g, b则新的RGB值为 代码如下: newr = (r * 0.272) + (g * 0.534) + (b * 0.131); newg = (r * 0.349) + (g * 0.6...
让我猜猜你心中的牌，先随机生成27张牌，不能重复列出三列牌，然后记住其中一张，然后点击牌所在的列，多次就可以猜出你想的牌。 如果是9张只要猜2次，如果是27张就是猜3次。 实现方法（27张）： 如果点击了第三列，那就是说牌一定在这9张里面，就把第三列的9张牌平均给每列分3张，假设编号为123，456，789 再点击一次，如果点击第二列，那么猜的牌就在456里面，再分到三列，4,5,6 再点击一次，就可以知道牌是哪个了。 实现算法： ...
这只是一个简单的JAVAscript和HTML5小程序，没有实现人机对战。 五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子； 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法，也可以按照教...
开始前的html页面 开始后的html游戏界面 html页面布局，即index.html文件源码如下： 代码如下: 弹球游戏 分数： 0 index.css文件源码如下： 代码如下: #gamePanel{ width:504px; height:504px; background:Black; position:relative; } #gamePanel .score{ font-size:20px; color:White; position:absolute; left:0; top:0; z-index:9999; } #gamePanel .bullet{ width:5px; height:15px; position:absol...
向大家分享一款如何实现js版连连看游戏，如下图所示： 首先看一下html的布局方式在index.html文件中： 代码如下: 连连看 分 数 0 时 间 0 css文件夹下的index.css文件如下： 代码如下: body { font-size : 16px; font-weight : bold; color : grey; } #whole { border : 1px double #999999; border-width : 5px; width : 800px; height : 505px; position : relative; } #gamePanel { margi...
绝对值得看的来篇，哈哈。本人亲自完成，有错误请大家指出： 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话，得改下js,目前支持谷歌，火狐，ie>=10,如果网友想要的话我就去写个 代码如下: 代码如下: eraser effect #canvas { background:url(winning-ticket.j...
css3 Animation： 代码如下: @-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/} }Jquery ： 代码如下:$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //在对象element中添加闪烁动画也可以在css样式里添加如下： 代码如下: #element{-webkit-animation: twinkling 1s infinite ease-in-out; }注：...
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多： 1.document.domain+iframe的设置，应用于主域相同而子域不同； 2.利用iframe和location.hash，数据直接暴露在了url中，数据容量和类型都有限 3.Flash LocalConnection， 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信， 只要 在同一客户端就行，跨应用程序， 可以跨域。 window.name 保存数据以及跨域 iframe 静态代理动态传输方案，充分的运...
项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement;//W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); }//FireFox else if (docElm.mozRequestFullScreen) { docElm.mozReq...
一、前言 文件上传是一个比较常见的功能，传统的选择方式的上传比较麻烦，需要先点击上传按钮，然后再找到文件的路径，然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的技术，这也是自己第一次接触nodejs，在nodejs开发中，最常用的开发框架之一是expess，它是一个类似mvc模式的框架。结合html5、nodejs express实现了拖拽上传的功能。 二、基础知识普及 1、NodeJs基础知识 n...
HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等。 Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: 介绍一个超强的让IE下支持placeholder的属性插件,同时也兼容其他不支持...
你一定知道 HTML5新增的 placeholder 属性吧？不知道的也没关系。输入框有默认文本是，常需要这样一个效果，点击让默认文本消失，失去焦点后让默认文本显示。 今天分享一段jQuery代码，模拟 placeholder 效果。 Javascript代码：代码如下: function placeHolder(event){var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();if(selfDataValue){event.type == "click" ? (selfValue == selfDataVa...
渐入弹窗，背景变色不可点击。查看效果：http://runjs.cn/detail/t08gmoijpopup#popup{position: absolute;display:none; z-index:3000; background-color:#FFF; left: 601px; top: 217px; height: 150px; width: 217px;line-height:94px;text-align:center;border: 1px solid #03F; } #embedding{position: absolute; background-color: #36F; top: 94px;height:56px; width:217px;line-height:56px;text-align:center; } a{text-...