学了一段时间的HTML、CSS和JS后，给大家做一款漂亮的不像实力派的HTML时钟，先看图：涉及到的知识点有： CSS3动画、DOM操作、定时器、圆点坐标的计算（好多人是不是已经还给自己的老师了~） 接下来，我们用5步来制作它 step1、准备HTML 首先，我们需要准备HTML结构，背景、表盘、指针（时针、分针、秒针）、数字。 <div id="clock"><div class="bg"><div class="point"><div id="hour"></div><div id="minute"></div><div id="sec...
做项目的时候有这么一个需求，客户信息显示出来后我要搜索查找相关的客户，并把相关的客户信息全部显示出来，因为一个客户全部信息我写在一个div里面 所以显示的时候就是显示整个div。先看看实现的效果： 当我输入瓦窑村 就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色， 其他的就不显示；下面看html代码： <body><div class="bar bar-header-secondary" style="top:0"><div class="searchbar"><a class="searchbar-ca...
随着html5的兴起，那些公司对大型游戏的开发正在慢慢疏远，一、开发周期长；二、运营花费高；他们正找一些能够克服这些缺点的替代品。正好，html5的出现可以改变这些现状，在淘宝、京东等一些大型电商网站、QQ、微信等聊天软件都出现了html5的小游戏，这说明html5越来越受到大家的青睐。接下来我用javascript实现一个小型游戏---打地鼠。 一．游戏简介 打地鼠这个游戏相信大家都不陌生，也是童年时候一款经典的游戏。本次游戏的编写...
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> // <input type="hidden" name="imgValue" id="imgValue" /> <button id="btnOpen1" class="btn btn-default" type="button" >Open WebCam</button> <select id="videoSource" ></select> <div id="vdoOne" style="display:none"> <video id="video" styl...
实现效果演示：实现代码及注释： <!DOCTYPE html> <html> <head><title>楼层跳跃式的页面布局</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}body, html{height: 100%;}ul{list-style: none;height: 100%;}ul li{height: 100%;}ol{list-style: none;position: fixed;top:200px;left: 50px;}ol li{width: 50px;height: 50px;border: 1px solid #000;text-align: center;line-height: 50px;margin-t...
本文实例为大家分享了html5 canvas在图片上画超链接的具体代码，供大家参考，具体内容如下 1. html <canvas id="canvasFile" style="margin-top:15px;" width="500" height="400"></canvas> <input type="button" id="btnRedo" value="Re-Draw" class="btn btn-warning"/> 2. javascript var photoW = 400; var photoH = 300; var photo; // logic load image into canvas // ... // e.g. // photo = new Image(); // photo.onlo...
本文实例讲述了jQuery实现html双向绑定功能。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script> var user = new User(123); $(function(){ user.set( "name", "99" ); });function GetData() {alert(user.attributes.name);} function DataBinder( object_id ) {var pubSub = jQu...
html 页面 <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="carousel.css" rel="external nofollow" ><title>轮播图效果</title> </head> <body><section id="main"><div id="picture"></div><!-- 添加图中按钮 图片轮播在js中大致成型后再写最好--><div id="dot"><spa...
断线重连的需求一断线重连原理二游戏内自动重连不刷新三刷新游戏自动重连重连数据Locationreplace重置url重连四实际项目中处理重连机制最后的总结断线重连的需求 尤其是手机上，会因为网络的不稳定或者其他原因，导致用户的socket链接断开。这个时候如果直接让玩家退出游戏，重新登录，无疑是非常影响用户体验的事情。所以根据这个需求，就有需要程序来实现断线后自动重连回去的技术，是用户能够再次快速开始游戏进行战斗。 一、断...
效果如下:一、设计思路 分为以下几步（仅供参考） 【竖线线】 这个采用ul的list标签制作，保证了可随时添加，以及纵向排布 【小圆圈】 html标签好像没有提供小圆圈标签，此处采用，div添加弧度角完成，，正方形的div添加弧度等于div的长（或者宽），就能够实现小圆圈。带子就更简单了，，div里直接添加文字即可 【文字】 文字要求紧跟小圆圈，，且与小圆圈保持同一水平高度，此处采用，position: absolute;设置top完成同一水平高度...
最近在封装一个开源框架，已经写了500行， 已经具备jquery的大多数常用功能，后面还会扩展大量的工具函数和MVVM双向驱动等功能。跟jquery的使用方法完全一样，jquery的选择器，几乎都能支持，为什么说这事，跟这篇文章的主题有毛关系呢？因为这篇文章要讲的就是我在写框架过程中碰到的一个问题，封装jquery的after方法，支持DOM和html标签两种用法，html标签传参，我要把html解释成DOM结构，用DOM的方法插入. 首先，我们写个通用的...
整理文档，搜刮出一个js使用html2canvas实现屏幕截取的示例代码，稍微整理精简一下做下分享。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>Test</title> <style type="text/css"> *{ margin:0 auto; padding:0; } .btn{ width:100px; height:30px; line-height:30px; background:green; color:#fff; border-ra...
我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html><head><title>dataset</title><meta charset="utf-8"> </head><body><div id=div data-index=demo></div> </body> <script type="text/javascript"> var a = document.getElementById(div); console.log(a) console.log(a.dataset.index)//demo </script></html>直接用dataset就可以获取到DOM元素的data属性 好吧，还可以 用js的获取属性的方法ge...
是的！你没看错！还是轮播图。这次的JQuery的哟！！ CSS代码： /*轮播图 左右按钮 小白点*/#second_div{margin-top: 160px;}.img_box{overflow: hidden;width:100%;height:420px;border:1px solid;position:relative;} .img_box img{width:100%;position:absolute;} .ul5{list-style: none;position:absolute;left:580px;top:565px;} .ul5 li{float:left;margin-left:20px;width:40px;height:5px;border:0px;background:lawngree...
本文实例为大家分享了HTML5图片在线预览的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head><title>HTML5图片预览</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script><style>.hide{display:none;}</style> </head> <body> <h3>请选择一张JPG/GIF的图片</h3> <form name="form0" id="form0" ><input type="...