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 相关文章推荐
用js来解决ajax读取页面乱码
Nov 28 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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+DBM的同学录程序(3)
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php构造函数实例讲解
2013/11/13 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
react 生命周期实例分析
2020/05/18 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
详解python itertools功能
2020/02/07 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
技术员岗位职责范本
2015/04/11 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python