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 相关文章推荐
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
JS回调函数深入理解
Oct 16 Javascript
原生js生成图片验证码
Oct 11 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
VSCode 配置uni-app的方法
2020/07/11 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
python实现倒计时的示例
2014/02/14 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
基于python时间处理方法(详解)
2017/08/14 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python-for循环的内部机制
2020/06/12 Python
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
大学生职业规划论文
2014/01/11 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
毕业生工作求职信
2014/06/30 职场文书
商务经理岗位职责
2014/07/30 职场文书
八一建军节演讲稿
2014/09/10 职场文书
就业意向协议书
2015/01/29 职场文书
鉴史问廉观后感
2015/06/10 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL