相信大家都玩过剪刀石头布这个游戏,今天为大家带来一段基于angular.js的HTML5剪刀石头布小游戏的代码,这个游戏是人机对战的游戏。用户可以选择剪刀,石头或者布其中一类选项,电脑则会随机选出一个选项对战,胜者是可以加一分的,接下来我们看看源码<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="user-scalable=no, width=...
hand中放置内部适配器,也就是css样式:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>/*全局适配器{外边距:0; 内边距:0}*/*{ margin: 0px; padding: 0px} /*标签适配器{宽度 高度 居中显示}*/body{width: 1024px; height: 100%; margin: 0 auto} /*“Baidu图片”*//*ID适配器{宽度 高度 居中显示 内边距:上 右 下 左*/#titl...
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下:下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在Firefox下也会稍卡。效果图:具体代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>3D玫瑰花</title><meta name="Generator"...
本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效。分享给大家供大家参考。具体如下:这是一款基于Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码,超逼真的模拟时钟,最大的特点还可以语音提醒,感兴趣的小伙伴们快来研究研究。运行效果图:小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。为大家分享的Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码如下<!doctype html><html lang=...
在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 Javascript(jquery)代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child").addClass("current"); $("div.content").find("div.layout:not(:first-child)").hide(); $("div.content div.l...
//遮罩 function coverDiv(){ var procbg = document.createElement("div"); //首先创建一个div procbg.setAttribute("id","mybg"); //定义该div的id procbg.style.background = "#000000"; procbg.style.width = "100%"; procbg.style.height = "100%"; procbg.style.position = "fixed"; procbg.style.top = "0"; procbg.style.left = "0"; procbg.style.zIndex = "500"; procbg.style.opacity = "0.6"; procbg.styl...
对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的。canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。完整的代码在这里https://github.com/wwervin72/HTML5-Clock。那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位...
有个静态页面 abcdeabcdeabcdeabcde 能否通过js实现,IE浏览时的代码被替换为 function change() { var image=document.getElementById('pic') image.innerHTML="" } 无标题文档 移到我这儿来 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]方法二:function change() { var dd = document.getElementById('猪') dd.innerHTML= "Menu1"} function showMenu(){ document.getElementById("menu1").style.display=""; documen...
突然看到那个apple的底下的那个很漂亮,所以呢,我就改进了一下 做了一个图片版本的,好像很多人都做了个 http://home.goofar.com/bqqdqq/photo/a.html 上面这个是预览地址 如果浏览速度慢的话,下面是我做了一个包出来 兼容FF,IE 在线演示http://img.jb51.net/online/photo/a.html本地下载http://img.jb51.net/online/photo/photo.rar
方法如下: 代码如下: 1
代码如下:<htmlxmlns="http://www.w3.org/1999/xhtml"> UntitledDocument function createIframe(){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="mDiv"; newMask.style.position="absolute"; newMask.style.zIndex="1"; _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrol...
在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 Javascript(jquery)代码如下: 代码如下: $(document).ready(function(){ $("ul.menu li:first-child").addClass("current"); $("div.content").find("div.layout:not(:first-child)").hide(); $("div.content div.layout").attr("id", function(){return idNumber(...
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果。分享给大家供大家参考,具体如下: 运行效果截图如下:具体代码如下:demo#canvas {background:#F2F2F2; height:500px; height:500px; margin-top:100px; margin-left:200px;}(function() {var dyl = {};dyl.getDom = function(id) {return document.getElementById(id);}dyl.getContext = function(canvasID) {var canvas = this.getDom(canvasID);if(!canvas) {return n...
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果。分享给大家供大家参考,具体如下: 运行效果截图如下:具体代码如下:demobody {margin:0; padding:0; }#canvas {border:5px solid gray; box-shadow:0 0 15px 15px #494949 inset;margin-top:50px; margin-left:200px;}var dyl = {};dyl.canvas = document.getElementById("canvas");dyl.ctx = dyl.canvas.getContext("2d");dyl.runTime = 0;dyl.colorList = "01234567...
本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考,具体如下: 运行效果截图如下:index.html代码如下:canvas中的缩放#canvas {background:black; margin-top:100px; margin-left:200px;}cache = {};var offsetX = 50,offsetY = 20;cache.context = dyl.createContext('canvas');dyl.rect(dyl.createColor(), 60 + offsetX, 0 + offsetY, 185, 100);dyl.rect(dyl.createColor(), 100 + offsetX, 100 +...