Jquery数独游戏解析(一)-页面布局_Javascript教程-查字典教程网
Jquery数独游戏解析(一)-页面布局
Jquery数独游戏解析(一)-页面布局
发布时间:2016-12-30 来源:查字典编辑
摘要:另外最近时间允许的情况下会移植到html5,暂定名称为H5sukudo主要目的也是练手。body的代码如下,页面主体使用main层来控制尺寸...

另外最近时间允许的情况下会移植到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">

<div id="canvas">

</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'>

<br />

<input type='button' value='Medium'>

<br />

<input type='button' value='Hard'>

<br />

<input type='button' value='Restart'>

<br />

<br />

<b><a href="#">

GameIntroduce</a> <a href="#">

AboutSoftware</a> </b>

</div>

<div id="err">

</div>

</div>

</center>

</body>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类