本文实例为大家分享了网页版日历代码，供大家参考，具体内容如下 效果图：实现代码：var my = new Date();function showc() {var k=1;var j=1;var today;var tomonth;var theday=1;//日期var max;var temp;var tempday;//这个月第一天的星期document.write ("" + my.getFullYear() + "-" + (my.getMonth()+1) + "");document.write ("");document.write ("");document.write ("Sun");document.write ("Mon");document.write ("Tue"...
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。 用的技术主要是： ajaxFileReaderFormDataHTML结构：已经封装好的upload.js，依赖zepto(function($) {$.extend($.fn, {fileUpload: function(opts) {this.each(function() {var $self = $(this);var doms = {"fileToUpload": $self.find(...
本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下 1.数据获取 画地图需要省份边界坐标，理论上可以每次都用百度API获取数据并绘图，但为了增加效率，首先将所有坐标都获取下来并存入数据库中。 新建省份数据数组代码如下:var allZoneData = [{name:辽宁省,been:yes,id:01},{name:吉林省,been:yes,id:02},……]; 轮询该数组，根据省份名称请求百度API获取坐标数据，并将数据以ajax方式放松给ph...
这是一款十分炫酷的HTML5 3D书本翻页动画，效果相对比较简单，拖拽鼠标模拟用手翻页，更漂亮的是翻页过程中，呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示，非常酷。在线演示 源码下载 HTML代码Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consecte...
对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。完整的代码在这里https://github.com/wwervin72/HTML5-Clock。 那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位...
HTML DOM 树一、DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口核心DOM：用于任何结构化文档的标准模型XML DOM：用于XML文档的标准模型。是用于获取、更改、添加或删除XML元素的标准。HTML DOM： 用于HTML文档的标准模型。定义了所有HTML元素的对象和属性，以及访问它们的方法（接口）。 二、DOM...
文件上传功能现在是越来越普遍，所有的社交网站，媒体网站，比如优酷视频，微博等，都提供了上传图片，上传视频等功能。但过去WEB程序员都很清楚，用HTML表单上传文件是很麻烦的事情，特别是你想了解一下用户上传的文件的一些属性，必须等它上传完成后才能知道。 未知的东西上传到服务器上，有可能产生安全问题，也有可能体积太大，超过允许，浪费空间。现在好了，WEB技术在进步，HTML5带来了很多好东西。这个FileReader API就能让...
本文实例编写的一个小游戏，基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成，键盘键事件的监听，小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库 游戏开发流程： 1、创建画布： 将画布放在div标签里面，这样可以控制画布居中的位置，再对div标签加上一些样式比如border和border-radius，这样一来使其看上去像手机，利于观看。2、创建移动的小木块： 定义一个...
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果，供大家参考，具体内容如下 一、纯css+html的手风琴效果 这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。 代码如下：body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;list-style: none;}#div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;} .list{width: 32...
写本文之前，我正在做一个基于Tab页的订单中心： 每点击一个TAB标签，会请求对应状态的订单列表。之前的项目，我会在js里使用 + 连接符连接多个html内容：var html = ''; html += '' + ''+ '还没有订单'+ '';Html内容少点还好，但是当内容多起来的时候，再使用这种方式，以后维护起来不方便，也影响美观，可阅读性差。突然想起来PHP模板的相关知识，那么应该也有类似JavaScript模板一说。由于为了快速使用在项目上，就去网上找了找...
我们经常参加各种电商优惠活动，比如购买达到一定数额进行抽奖活动，在比如微信抽奖，淘宝抽奖，迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的，今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩，先看下效果图吧：再来看看Canvas的几个主要api：全部源代码如下：HTML5 Canvas圆盘抽奖应用DEMO演示*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";} ....
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。 主页：http://www.kindsoft.net/index.php下载：http://www.kindsoft.net/down.php示例：http://www.kindsoft.net/demo.php 在使用kindeditor文本编辑器时遇到的问题，客户直接从...
在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发。如何使用requirejs加载htmlReuqirejs有一个text的插件，它可以读取指定文件的内容，读取到的内容就是文本。如何下载text插件第一种方法，可以通过npm下载： npm install requirejs/text 第二种方法，也可以直接去官方github上面直接下载。 直接拷贝内容到text.js中即可。如何安装text插...
简单记录下今早做H5上传中一些代码还有坑 一、展示 因为前端上传文件是必须通过form表单的，不能使用ajax，这样的话一个移动页面放入一个type为file的input真心不怎么好看，如下图，很挫有没有解决办法找了下，PC上有些是把这个input换成flash，采用jquery的工具库比如uploadify来做，但是移动端大部分浏览器是不支持flash的。所以最后采用的办法还是用form表单的形式，只是把这个form和input的透明度设置为0，让它们和准备显示的内...
之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。 功能需求 1、转盘要美观，转动效果流畅。 2、转盘上需要显示奖品图片，并且奖品是后台读取的照片和名字。 3、转动动画完成后要有相应提示。 4、获取的奖品具体算法在数据库里操作，前端只提供最后的效果展示。 知识要点 1、引用了一个jq插件：awardRotate，用来实现更智能化的转动（插件下载：http://www.jqc...