Jquery数独游戏解析(一)-页面布局


Posted in Javascript onNovember 05, 2010

另外最近时间允许的情况下会移植到html5,暂定名称为H5sukudo主要目的也是练手。

body的代码如下,页面主体使用main层来控制尺寸,main中包含两个层:canvas和tools,分别用来承载数独表格和辅助信息。tools层中嵌套了logo,level,lefts,timer,leftsg,btns,err共七个层,分别用来承载LOGO、游戏难度、剩余空格数、已用时间、剩余空格数明细、按钮和错误提示信息。tools层中的样式写在default.css样式文件中。canvas层、level层、lefts层、timer层、leftsg层、err层的内容由jquery控制动态生成,后续会有解释。

<body onselectstart="return false" oncopy="return false" oncut="return false"> 
<center> 
<div id="main" style="width: 720px; height: 550px;"> 
<div id="canvas" style='width: 540px; height: 540px; float: left'> 
</div> 
<div id="tools"> 
<div id="logo"> 
JSUKUDO 
</div> 
<div id="level"> 
Level: 
</div> 
<div id="lefts"> 
</div> 
<div id="timer"> 
Timer: 
</div> 
<div id="leftsg"> 
</div> 
<div id="btns"> 
<input type='button' value='Easy' onclick="$(g.canvas).gensukudo(2);$('#level').html('LEVEL:'+$(this).val());"> 
<br /> 
<input type='button' value='Medium' onclick="$(g.canvas).gensukudo(3);$('#level').html('LEVEL:'+$(this).val());"> 
<br /> 
<input type='button' value='Hard' onclick="$(g.canvas).gensukudo(4);$('#level').html('LEVEL:'+$(this).val());"> 
<br /> 
<input type='button' value='Restart' style="display: none;" onclick="$('#SukudoTable').fadeOut(500);$('.c').each(function(){if(this.num()!=0)$(this).setempty().check();});$('#SukudoTable').fadeIn(500);"> 
<br /> 
<br /> 
<b><a href="#" onclick="$(g.canvas).unblock().block({ message: gameintruce, css: {width:'480px', border: '3px solid #a00' } });"> 
GameIntroduce</a> <a href="#" onclick="$(g.canvas).unblock().block({ message: aboutgame, css: {width:'400px', border: '3px solid #a00' } });"> 
AboutSoftware</a> </b> 
</div> 
<div id="err"> 
</div> 
</div> 
</center> 
</body>

Jquery数独游戏解析(一)-页面布局
Javascript 相关文章推荐
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 #Javascript
jQuery示例收集
Nov 05 #Javascript
jquery 全局AJAX事件使用代码
Nov 05 #Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 #Javascript
QUnit jQuery的TDD框架
Nov 04 #Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 #Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
You might like
php 删除无限级目录与文件代码共享
2008/11/22 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python障碍式期权定价公式
2019/07/19 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python实现快递价格查询系统
2020/03/03 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
财务主管岗位职责
2014/02/28 职场文书
春节联欢会策划方案
2014/05/16 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers