HTML5
文章平均质量分 66
梧桐下的四叶草
这个世界并没有我看上去的那么简单,人各有命,上天注定。有人天生为王,有人落草为寇。脚下的路,如果不是你自己的选择。那这旅程的终点在哪儿,也没人知道。你会走到哪儿,会碰到谁。都不一定。
展开
-
城市三级联动
在做商城的地址选择中,发现很多的城市数据都不太齐全。然后也亲自去看了一下淘宝里面的城市数据,发现大网站的数据都挺齐全的。然后在网上找插件,发现都是没有齐全的。之后找了一个个人认为挺好用的插件。这个也是淘宝的SUI移动端(传送门)。 这个插件使用起来非常方便,只要添加如下代码<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0...原创 2018-03-05 15:21:57 · 375 阅读 · 0 评论 -
关于CSS的百分比布局
对于刚学HTML不久的菜鸟来说,使用CSS布局简直是噩梦,因为有的时候在某个标签内写了相关的代码来布局,却一点效果都没有。这次我是在做自适应的时候发现的,关于width和height的百分比使用的问题,这里挺坑的。例如:在这个html里面,如果你想用最里面的div完全铺面浏览器,最简单的方法就是直接在css那里定义height:100%,width:100原创 2016-09-22 11:27:21 · 1545 阅读 · 0 评论 -
电脑chrome浏览器模拟手机环境
在做手机游戏的时候难免会遇到手机游戏测试的时候,这时候下载一个chrome浏览器就很有必要了,因为他可以模拟手机环境。如果模拟成功的话,你可以用电脑来上手机版的网页。废话不多看图。我的浏览器不知道是什么的版本,反正和网上说的不同。网上的做法:链接原创 2016-09-23 15:07:09 · 3934 阅读 · 0 评论 -
获取设备及浏览器等的高度和宽度
转载自: http://blog.csdn.net/nikita1995/article/details/52063549本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。目录1. 介绍:介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。2. 屏幕信息:介绍屏幕尺寸信息;如:屏幕、软件可用以及任务栏的高度和宽度。3. 浏览器信息:转载 2016-09-22 17:46:50 · 470 阅读 · 0 评论 -
(28)HTML5-jQuery的Dom操作
所谓的DOM操作是指对标签的内容进行添加,修改或删除。例如有个HTML标签如下,则“你好”就是标签的内容部分。你好了解了DOM操作的控制对象后,接着就来看看jQuery中有哪些可以帮助开发人员控制这个区块。{函数html}此函数类似javascript中的innerHTML功能,可以直接获取或设置标签的内容。//获取>标签的HTML内容$(div).html();/原创 2016-09-05 15:45:43 · 320 阅读 · 0 评论 -
(27)HTML5-JQuery标签控制
jQuery内建的函数除了可以达到网页事件监听之外,还可以直接修改网页的属性(Attributes)和样式(CSS),以及对COM直接进行操作,更神奇的还在后头,jQuery函数还包括了一些视觉动画的处理,例如隐藏,显示,下拉显示,淡入淡出等,对于设计网页互动有非常大的帮助。{Attributes}jQuery提供了attr,class,value等函数可以直接设置,删除或获取HTML标签原创 2016-09-04 17:09:06 · 442 阅读 · 0 评论 -
(26)HTML5-jQuery函数
通过jQuery批次选取标签元素后,接下来就可以应用jQuery所提供的函数进行更进一步的操作,加入jQuery函数的方法,是选取指令后面接上一个小点,再直接键入所要调用的函数名称,部分函数名称需要额外的输入参数。统计选取元素的总数通过jQuery批次选取可以一次选到多个元素,这些元素会以数组的类型存储,因此可以通过以下指令来统计选取到的元素总数是多少。$('div').length;原创 2016-09-04 16:32:21 · 368 阅读 · 0 评论 -
background-position 用法详细介绍
转载自:http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html语法: background-position : length || length background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成转载 2016-09-16 11:14:46 · 432 阅读 · 0 评论 -
(25)HTML5-初识jQuery
在jQuery的语句中,将由“选取”和“控制”两部分组成。从这段语句已经可以看出jQuery的几项特色。首先以$符号作为声明jQuery的识别语句,其次是批次操作,通过选取指令可以一次性的选择HTML文件中的某个标签名称,接下来则可以直接运用jQuery库提供的控制指令,这里直接使用“addClass”函数便能做到为所有的标签加上class属性,不需要再自己设计循环来加入,省去许多麻烦原创 2016-09-04 15:29:02 · 306 阅读 · 0 评论 -
(24)HTML5-窗体切换
介绍完localStorage和sessionStoage后,基本上已经掌握了两者使用的精髓,如果还是不够清楚的话也没有关系,在这个章节的例子中,将会直接把两种存储方式设计在同一个程序中,我们就逐一地来比较在各个状态下的数据保留形式。首先在画面里设计两个字段,一个字段的数据会以“localStorag”方式存储,一个字段会以“sessionStorage”方式存储。在两个字段中分别键入数据后,原创 2016-09-04 14:02:53 · 609 阅读 · 0 评论 -
微信h5页面禁止下拉露出网页来源
转载自:http://www.cnblogs.com/cococe/p/5956870.html1.可以给document的touchmove时间禁止掉就行了123document.querySelector('body').addEventListener('touchmove', function(e) {转载 2016-10-21 17:48:49 · 12190 阅读 · 2 评论 -
浅谈CSS选择器中的空格
http://blog.sina.com.cn/s/blog_6b904b690100o8zv.htmlHTML文档是一棵树的结构,各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素,要么是另一个元素的父元素,要么是另一个元素的子元素,这样,各元素之间就形成了‘父子关系’。基于这样的关系模型,CSS定义了后代选择器(descendant selector)也称为上下文选择器(c转载 2016-10-11 21:29:31 · 429 阅读 · 0 评论 -
HTML5-打字游戏
在网上找了一个HTML5的代码,照着敲了一下。发现收获还是蛮大的。而这个代码大多数是使用jq来写的。对于刚学js不久的自己也算是学习jq的一个不错的项目。游戏效果图如下:这个图是只写好html和css的图:这两个是写好的代码效果:HTML代码: HTML5金山打字游戏源码原创 2016-10-14 11:37:18 · 4398 阅读 · 0 评论 -
网页游戏课设-金庸群侠传
金庸群侠传原创 2017-01-06 17:53:13 · 1189 阅读 · 0 评论 -
Head First深入浅出
最近对于Head First的书籍着迷了,感觉写的生动易懂,该深入的时候深入去探讨。而且还有一些工程上的东西交给你,在网上找了一些电子书,发现有些太大无法上传,所以只是上传了两个,如果想找的话可以自己百度其它的书籍,这里给出两个书籍的链接Head First HTML与CSS、XHTML(中文版)[Head.First.PHP.&.MySQL].Lynn.Beighley.扫描原创 2016-12-25 23:49:28 · 728 阅读 · 0 评论 -
HTML-告白程序
今天身为单身狗的自己突然之间心血来潮,写了个告白程序,或许是内心的躁动吧,自己虽然是用不上了,但是还是希望与众多的单身汪分享一下。希望全世界都不再有单身狗了,尤其是程序员。废话不多,下面跟着我一起做来送给心爱的女生吧!原创 2016-12-09 12:58:25 · 33157 阅读 · 9 评论 -
问答游戏
这个问答游戏要用火狐等浏览器来打开,chrome的话不可以本地读取xml文件。具体代码如下:html:原创 2016-11-23 14:45:22 · 485 阅读 · 0 评论 -
翻牌记忆游戏
这个游戏是从网上找的代码参考做出来的,参考的游戏是全静态的布局,无法自适应。我将其修改了一下,将其改为自适应的程序。这个程序我是有php代码的,所以如果没有学过的话,可以学一下,或者将php代码删除了,再改一下文件的后缀为.html就可以运行了。开始界面做的比较丑,将就着看吧。排名榜的界面。帮助的界面。游戏的主体部分。结束的界面。原创 2016-11-23 11:39:00 · 1904 阅读 · 4 评论 -
HTML5 <Audio>标签API整理(一)
简单实例: audio id="myAudio">audio> script> var myAudio = document.getElementById('myAudio'); myAudio.src = '../content/audio/海阔天空.mp3'; myAudio.play(); myAudi转载 2016-12-04 23:28:20 · 635 阅读 · 0 评论 -
form中onsubmit的使用
转载自:http://blog.csdn.net/moqiang02/article/details/18414363form 中的onsubmit在点submit按钮时被触发,如果return false;则结果不会被提交到action中去(也就是提交动作不会发生),如果不返回或者返回true,则执行提交动作。(baidu也同理),下面是一个例子程序。[html]转载 2016-10-16 15:09:58 · 590 阅读 · 0 评论 -
HTML5-俄罗斯方块
这个游戏主要分为三部份,HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。大多数都是靠js来完成的。完成后的效果如下:HTML代码:<body> <div class="wrap"> <div class="play_wrap"> ...原创 2016-10-15 18:21:38 · 6600 阅读 · 4 评论 -
微信网页向下滑动顶部出现XXX信息的禁止
最近要做一个触摸的手机网页小游戏,之后发现在微信网页上打开后一触摸向下滑动就出现错误了,根本不能控制你的角色移动,因为顶部的XXX信息出现了,整个游戏屏幕向下走,还玩个鬼呀。之后就是不断找方法解决,在网上找了很多,结果发现与自己所要的还是有点区别。之后发现其实很简单就可以实现这个效果,只要在触摸事件函数上增加一个event.preventDefault();就OK了。原创 2016-11-05 14:58:04 · 1391 阅读 · 0 评论 -
(23)HTML5-Cookie和Session
cookies的特点是将数据存储于client的浏览器中,因此当cookie没有经过加密时,在传输的过程中容易被拦截,因此不建议用cookie存储一些私密性高的数据。当server端想要存储用户的某些信息时,可以放送一个cookie给client,这时便会通过javascript的语句将数据写入文件内,然后存储在用户的电脑里,当日再次启动同一个页面时,就会通过javascript读取cooki原创 2016-09-04 11:26:48 · 940 阅读 · 1 评论 -
(22)HTML5-web应用基础
在HTML5游戏设计的web应用中,经常通过AJAX和JSON实现服务器与客户端的数据交换。现在举行一个结合AJAX和JSON应用于网上商城的范例:玩家点击网上商城宝物的缩略图。javascript通过AJAX将宝物ID传送给服务器端。服务器收到ID,将产品数据(例如价格,功能)编码成JSON格式。把JSON数据回传给客户端。javascript收到数据,解码(decode)后原创 2016-09-03 17:14:31 · 321 阅读 · 0 评论 -
(21)HTML5-动画小剧场
在游戏设计中有一种让动画角色动起来的动画技术称为”sprite“,也就是角色表。角色表是把一系列角色连续动作的图片排序在一起,拼成一张完整的大图片。再接着通过程序控制,快速连续的播放每个窗口的动作,就能实现角色动画的效果,其概念与gif动画原理相同。在这里使用drawimage()与setInterval两个函数来设计一个会跳舞的熊喵动画小剧场。首先在HTML的部分加入标签,来置入背景原创 2016-09-03 15:09:52 · 351 阅读 · 0 评论 -
(9)HTML5-表格与窗体
在纯粹只有HTML5语句的时候,可以简单地使用,,,来构造表格的结构。标签:表示整个表格的范围标签:表示表格中一行的单元格标签:表示表格中的一列的单元格标签:表示表格中的一个基本单元格HTML文件 科目 小明 小花 语文 55分 10原创 2016-08-30 17:47:23 · 484 阅读 · 0 评论 -
(8)HTML5-图片
在图片单元中,我们重点介绍的是如何改变游戏的前景与背景,以及CSS中一个重要的“盒子模式(box model)”布局概念。前景与背景前景属性通常应用于指定的文字显示的颜色,而背景属性可以决定游戏图片或颜色要以何种方式布局在游戏画面的最底层。Color(前景色)background-color(背景色)background-image(背景图案)background-repe原创 2016-08-30 16:25:33 · 453 阅读 · 0 评论 -
CSS3弹性伸缩布局(一)——box布局
转载自:http://www.cnblogs.com/jr1993/p/4751410.htmlCSS3弹性伸缩布局简介2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段,并且它还分为旧版本、新版本以及混合过渡版本转载 2016-09-10 15:22:43 · 535 阅读 · 0 评论 -
(7)-HTML5-CSS文字样式
在文字的css样式中又可以区分为两大类。其一是字体(font)。主要规范文字的外观,例如字体,大小,粗体,斜体等等。其二是文字(text),主要用于文字的排版,例如对齐,字距,行距等等。字体常见属性有:font-family(字体)font-style(斜体)font-weight(粗体)font-size(大小)==============================原创 2016-08-29 20:54:40 · 838 阅读 · 0 评论 -
(6)HTML5-引用CSS
要在网页中显示CSS样式表单的设置,必须从HTML文件中引用CSS。一般常见的引用方式共有三种,分别是内联(Inline),嵌入(Embed)以及外部链接(External link)。一般在设计游戏的时候都采用“外部链接”方式,这样比较方便进行程序代码的整理与维护。内联:黄色背景嵌入样式表单: body : {background-color:#FFFF00;原创 2016-08-29 19:39:36 · 623 阅读 · 0 评论 -
(5)HTML5-CSS基础知识
CSS基本语句css是由“选择器”,“属性”和“设置值”三个元素所组成的。声明基本如下:选择器 {属性:设置值;。。。。。}选择器的功能是用于指定在HTML程序中遇到的何种标签时,就套用括号内的属性和设置。选择器分三种,分别是“TYPE”,“CLASS”和“ID”。TYPE是HTML里会使用到的选择器标签,例如《body》《header》等。Class和ID则是由开发人员自行定义的选择原创 2016-08-29 19:24:07 · 527 阅读 · 0 评论 -
(4)HTML5-Web应用程序
Username: Encryption: 0200+= 订饭盒 荤45人 9/10 素5人 10% 下载进度原创 2016-08-29 15:49:08 · 454 阅读 · 0 评论 -
(3)HTML5-多媒体应用
简易音乐播放器 简易的视频播放器 简易的视频播放器<!--在《video》标签内加入《track》,可以为影片加载WebVTT字幕文件,播放器也会增加“cc”的字幕选项供用户使用 kind:定义文件类型 srclang:指定字幕文件的语言,在播放器中不会用到-->原创 2016-08-29 15:02:11 · 521 阅读 · 0 评论 -
(2)HTML5-内容标记方法
<!-- 此标签可以声明一组包含图片标题,信息的分组。浏览器会将(figure)内的所有元素(包括文字,图像)视为一个对象。 --> 宝藏 大宝藏 <!-- 此标签是(figure)下的一个子标签,放在figcaption标签内的文字代表 “图片的标题”。(figcaption)子标签应该被置在(figure)下的一个原创 2016-08-28 22:55:29 · 514 阅读 · 0 评论 -
css3动画属性--animation(动画)
CSS3中的animation与HTML5中的Canvas绘制动画又不同,animation只应用在页面上已存在的DOM元素上。运用animation能创建自己想要的一些动画效果,但是有点粗糙。了解animation之前得知道"Keyframes",我们把他叫做“关键帧”。Keyframes具有其自己的语法规则,它的命名是由"@keyframes"开头,后面紧接着是这个转载 2016-08-31 20:01:13 · 427 阅读 · 0 评论 -
(10)HTML5-CSS网页小游戏
游戏的组成有如下:初始画面:初始画面的布局包括背景,计分栏,地鼠和计时条。计分系统:若打到地鼠,计分栏的分数会加一,最低0,最高十分。计时系统:游戏时间计时10秒,计时条会显示游戏进行的进度。地鼠系统:总共有5个洞,一个洞最多出现两只地鼠,共十只地鼠。特效系统:地鼠被打击到会出现“碰”字样的特效。动画系统:地鼠AI,时间条变化,分数更新。图片资源下载链接原创 2016-08-31 19:48:32 · 1645 阅读 · 0 评论 -
(11)HTML5-鼠标单击事件监听
JavaScript是一种面向对象的程序设计语言,因此语言的基本结构会包含对象(object),方法(method)和数值(value)三个要素,指令如下:对象:JavaScript中已经声明了多种对象供开发人员调用,方便我们快速处理画面中可能发生的互动需求,常用的对象包括文档(document),窗口(window),变量(var),数学运算(math),字符串(string),图片(pic原创 2016-09-01 16:51:29 · 5323 阅读 · 0 评论 -
(20)HTML5-多媒体影音播放
之前曾经介绍过,在HTML5中可以通过标签在网页中播放影片,且不需要再安装额外的插件,此功能已经带给用户极大的便利。但基本的标签只提供了简单功能的播放器界面,如果想要改变播放器的外观和功能,只能结合标签和javascript语句,就能制作出酷炫的播放控制器。{drawImage}画布canvas如何与视频video标签结合,达到制作各种视频功能的效果呢?其秘诀在于通过画布重新描绘一次视频的原创 2016-09-03 14:01:30 · 622 阅读 · 0 评论 -
(19)HTML5-Canvas动画应用
学完了基础的几何图形绘制与变形,接下来要感受一下canvas处理动画的威力,毕竟游戏美工最重要的就是要让画面动起来,才不会让玩家觉得枯燥乏味。HTML5的画布提供了强大的动画应用函数,应用这些函数播放一连串的静态影格,就可以让画面“动起来”了。{setinterval}动画操作的概念是通过快速连续播放无数个静态影格,从通过人类视觉暂留效应达到画面动起来的感觉。因为需要每隔一段时间就会自动执原创 2016-09-03 12:04:38 · 391 阅读 · 0 评论 -
(18)HTML5-控制图形的变形
介绍完绘制简单几何图形的函数后,接着来介绍如何使用javascript控制图形的变形,例如位移(translate),旋转(rotate)和缩放(scale)等,在游戏中通常会使用到这些变形方法。{translate}位移方法可以直接对画布的x,y坐标进行移动。所谓对画布进行移动,也就是原本画布定义的原点坐标(0,0)在画布的左上角,当使用位移方法后,原点坐标将会重新定义成坐标(x,y)的原创 2016-09-02 16:29:04 · 689 阅读 · 0 评论