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 相关文章推荐
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
javascript常用经典算法详解
Jan 11 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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语法自动检查的Vim插件
2014/08/11 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
医药专业推荐信
2013/11/15 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
班主任工作年限证明
2014/01/12 职场文书
企业总经理任命书
2014/06/05 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
个人委托书如何写
2014/09/25 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
优秀员工推荐材料
2014/12/20 职场文书
golang 实现Location跳转方式
2021/05/02 Golang