js封装、简单实例源码记录
1、运动封装：doMove ( obj, attr, dir, target, endFn ) 加入回调、&&、||用法注释
<script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { // doMove ( oDiv, 'width', 34, 600 );
doMove ( oDiv, 'left', 12, 900, function () {
doMove ( oDiv, 'top', 34, 500 );
}); }; function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; // 步长 if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
} obj.style[attr] = speed + 'px'; if ( speed == target ) {
clearInterval( obj.timer ); /*
if ( endFn ) {
endFn();
}
*/
endFn && endFn(); //只有endFn条件为真就会执行endFn()
//alert(getStyle(obj, 'left')||3); //哪边为true就返回哪边 布尔、string、number、object、function
} }, 30);
} function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script><script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { // doMove ( oDiv, 'width', 34, 600 );
doMove ( oDiv, 'left', 12, 900, function () {
doMove ( oDiv, 'top', 34, 500 );
}); }; function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; // 步长 if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
speed = target;
} obj.style[attr] = speed + 'px'; if ( speed == target ) {
clearInterval( obj.timer ); /*
if ( endFn ) {
endFn();
}
*/
endFn && endFn(); //只有endFn条件为真就会执行endFn()
//alert(getStyle(obj, 'left')||3); //哪边为true就返回哪边 布尔、string、number、object、function
} }, 30);
} function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script>
通用动画js
2、ajax封装
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + encodeURI(data);
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText); //定义回调，并传入参数，客户端接收这个参数，并显示出来
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
ajax封装
//最好将监听放在open、send方法前面调用。xhr.onreadystatechange=function(){...};
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { /*ajax({
url : 'getNews.php',
success : function(data) {
//...
}
});*/ ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
}); setInterval(function() {
ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
}, 1000); }
}
</script>
</head> <body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>
定时刷新
3、定宽瀑布流
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: ;}
#ul1 {width: 1080px; margin: 100px auto ;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {
var oUL=document.getElementById('ul1');
var aLi=oUL.getElementsByTagName('li');
var iPage=;
var b = true; getList(); function getList() { ajax('get', 'getPics.php', 'cPage='+iPage, function(data){ var data=JSON.parse(data); if ( !data.length ) {
//后续没有数据了
return ;
} for(var i=; i<data.length; i++) {
//获取高度最短的li
var _index = getShort(); //创建3个节点div/img/p
var oDiv = document.createElement('div');
var oImg = document.createElement('img');
var oP = document.createElement('p');
oImg.src = data[i].preview;
oImg.style.width = '225px';// 同比例缩放
oImg.style.height = data[i].height * ( / data[i].width ) + 'px';
oDiv.appendChild( oImg );
oP.innerHTML = data[i].title;
oDiv.appendChild( oP );
//最后节点永远放在高度最小的那列
aLi[_index].appendChild( oDiv );
}
b=true;
});
} window.onscroll = function() {
var _index = getShort();
var oLi = aLi[_index]; var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; if(getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop) {
if(b) {
b=false;
iPage++;
getList();
}
} }; function getShort(){
var index=;
var s=aLi[index].offsetHeight;
for(var i=; i<aLi.length; i++) {
if(s>aLi[i].offsetHeight) {
index=i;
s=aLi[i].offsetHeight;
}
}
return index;
} //最小的高度obj的top值
function getTop(obj) {
var iTop = ;
while(obj) {
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
return iTop;
} };
</script>
</head> <body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
ajax定宽瀑布流
4、ajax留言（调用后台）
另外跨域域名下加'Access-Control-Allow-Origin' 'http://www.a.com'; //这是允许访问该资源的域（服务器设置响应头信息，标准支持，ie不支持）
jsonp解决跨域
//ie支持此种跨域，标准不支持
var oXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function() {
alert(this.responseText);
}
oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
oXDomainRequest.send();
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
#div2 {width: 0; height: 30px; background: #CCC;}
#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() { var oBtn = document.getElementById('btn');
var oMyFile = document.getElementById('myFile');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); oBtn.onclick = function() { //alert(oMyFile.value); //获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件 //oMyFile.files file控件中选择的文件列表对象
//alert(oMyFile.files); //我们是要通过ajax把oMyFile.files[0]数据发送给后端 /*for (var attr in oMyFile.files[0]) {
console.log( attr + ' : ' + oMyFile.files[0][attr] );
}*/ var xhr = new XMLHttpRequest(); //
xhr.onload = function() {
//alert(1);
//var d = JSON.parse(this.responseText); //alert(d.msg + ' : ' + d.url); alert('OK,上传完成');
} //获得ajax上传对象upload。
var oUpload = xhr.upload;
oUpload.onprogress = function(ev) {
//console.log(ev.total + ' : ' + ev.loaded);
//上传比例,loaded 已经上传大小， total总大小
var iScale = ev.loaded / ev.total;
oDiv2.style.width = 300 * iScale + 'px';
oDiv3.innerHTML = Math.floor(iScale * 100) + '%'; }
//上传一般都用post上传
xhr.open('post', 'post_file.php', true);
//设置发送文件的请求头
xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest;');
var oFormData = new FormData(); //通过FormData来构建提交数据
oFormData.append('file', oMyFile.files[0]);
xhr.send(oFormData); } }
</script>
</head> <body>
<input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
<div id="div1">
<div id="div2"></div>
<div id="div3">0%</div>
</div>
<form action="pp_files.php" method="post" enctype="multipart/form-data">
<!--enctype:multipart/form-data 发送文件头--->
</form>
</body>
</html>
ajax上传文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<link rel="stylesheet" href="css.css" type="text/css" />
<script src="ajax.js"></script>
<script src="guestbook.js"></script>
</head> <body>
<div id="header"></div> <div id="container"> <div id="list">
<!--<dl>
<dt>
<strong>zmouse</strong> 说 :
</dt>
<dd>内容</dd>
<dd class="t">
<a href="javascript:;" id="support">顶(<span>0</span>)</a>
|
<a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
</dd>
</dl>-->
</div>
<div id="showMore">显示更多...</div> <div id="sidebar"> <div id="user" style="margin-bottom: 10px;">
<h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
</div> <!-- 注册 -->
<div id="reg">
<h4>注册</h4>
<div>
<p>用户名：<input type="text" name="username" id="username1"></p>
<p id="verifyUserNameMsg"></p>
<p>密码：<input type="password" name="password" id="password1"></p>
<p><input type="button" value="注册" id="btnReg" /></p>
</div>
</div> <!-- 登陆 -->
<div id="login">
<h4>登陆</h4>
<div>
<p>用户名：<input type="text" name="username2" id="username2"></p>
<p>密码：<input type="password" name="password2" id="password2"></p>
<p><input type="button" value="登陆" id="btnLogin" /></p>
</div>
</div> <!-- 留言发表 -->
<div id="sendBox">
<h4>发表留言</h4>
<div>
<textarea id="content"></textarea>
<input type="button" value="提交" class="btn1" id="btnPost" />
</div>
</div>
</div> </div> </body>
</html>
留言HTML
window.onload = function() {
var oUser = document.getElementById('user');
var oReg = document.getElementById('reg');
var oLogin = document.getElementById('login');
var oUserInfo = document.getElementById('userinfo');
var oList = document.getElementById('list');
var iPage = 1;
var oShowMore = document.getElementById('showMore');
var oUsername1 = document.getElementById('username1');
var oVerifyUserNameMsg = document.getElementById('verifyUserNameMsg');
//初始化
updateUserStatus();
function updateUserStatus() {
var uid = getCookie('uid');
var username = getCookie('username');
if (uid) {
//如果是登陆状态
oUser.style.display = 'block';
oUserInfo.innerHTML = username;
oReg.style.display = 'none';
oLogin.style.display = 'none';
} else {
oUser.style.display = 'none';
oUserInfo.innerHTML = '';
oReg.style.display = 'block';
oLogin.style.display = 'block';
}
}
showList();
/*
验证用户名
get
guestbook/index.php
m : index
a : verifyUserName
username : 要验证的用户名
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
oUsername1.onblur = function() {
ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function(data) {
//alert(data);
var d = JSON.parse(data);
oVerifyUserNameMsg.innerHTML = d.message;
if (d.code) {
oVerifyUserNameMsg.style.color = 'red';
} else {
oVerifyUserNameMsg.style.color = 'green';
}
});
}
/*
用户注册
get/post
guestbook/index.php
m : index
a : reg
username : 要注册的用户名
password : 注册的密码
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
var oPassword1 = document.getElementById('password1');
var oRegBtn = document.getElementById('btnReg');
oRegBtn.onclick = function() {
ajax('post', 'guestbook/index.php', 'm=index&a=reg&username='+encodeURI(oUsername1.value)+'&password=' + oPassword1.value, function(data) {
var d = JSON.parse(data);
alert(d.message);
});
}
/*
用户登陆
get/post
guestbook/index.php
m : index
a : login
username : 要登陆的用户名
password : 登陆的密码
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
var oUsername2 = document.getElementById('username2');
var oPassword2 = document.getElementById('password2');
var oLoginBtn = document.getElementById('btnLogin');
oLoginBtn.onclick = function() {
ajax('post', 'guestbook/index.php', 'm=index&a=login&username='+encodeURI(oUsername2.value)+'&password=' + oPassword2.value, function(data) {
var d = JSON.parse(data);
alert(d.message);
if (!d.code) {
updateUserStatus();
}
});
}
/*
用户退出
get/post
guestbook/index.php
m : index
a : logout
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
var oLogout = document.getElementById('logout');
oLogout.onclick = function() {
ajax('get', 'guestbook/index.php', 'm=index&a=logout', function(data) {
var d = JSON.parse(data);
alert(d.message);
if (!d.code) {
//退出成功
updateUserStatus();
}
});
return false;
}
/*
留言
post
guestbook/index.php
m : index
a : send
content : 留言内容
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
data : 返回成功的留言的详细信息
{
cid : 留言id
content : 留言内容
uid : 留言人的id
username : 留言人的名称
dateline : 留言的时间戳(秒)
support : 当前这条留言的顶的数量
oppose : 当前这条留言的踩的数量
}
message : 返回的信息 具体返回信息
}
*/
var oContent = document.getElementById('content');
var oPostBtn = document.getElementById('btnPost');
oPostBtn.onclick = function() {
ajax('post', 'guestbook/index.php', 'm=index&a=send&content='+encodeURI(oContent.value), function(data) {
var d = JSON.parse(data);
//alert(d.message);
if (!d.code) {
//添加当前留言到列表中
createList(d.data, true);
}
});
}
//从后台返回的json的data
function createList(data, insert) {
var oDl = document.createElement('dl');
var oDt = document.createElement('dt');
var oStrong = document.createElement('strong');
oStrong.innerHTML = data.username;
oDt.appendChild(oStrong);
var oDd1 = document.createElement('dd');
oDd1.innerHTML = data.content;
var oDd2 = document.createElement('dd');
oDd2.className = 't';
var oA1 = document.createElement('a');
oA1.href = '';
oA1.innerHTML = '顶(<span>'+data.support+'</span>)';
var oA2 = document.createElement('a');
oA2.href = '';
oA2.innerHTML = '踩(<span>'+data.oppose+'</span>)';
oDd2.appendChild(oA1);
oDd2.appendChild(oA2);
oDl.appendChild(oDt);
oDl.appendChild(oDd1);
oDl.appendChild(oDd2);
//oList存在留言就在oList前面插入留言insertBefore,否则直接插入留言appendChild
if (insert && oList.children[0]) {
oList.insertBefore(oDl, oList.children[0]);
} else {
oList.appendChild(oDl);
}
}
//点击显示更多的内容
oShowMore.onclick = function() {
iPage++;
showList();
}
function showList() {
/*
初始化留言列表
get
guestbook/index.php
m : index
a : getList
page : 获取的留言的页码，默认为1
n : 每页显示的条数，默认为10
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
data : 返回成功的留言的详细信息
{
cid : 留言id
content : 留言内容
uid : 留言人的id
username : 留言人的名称
dateline : 留言的时间戳(秒)
support : 当前这条留言的顶的数量
oppose : 当前这条留言的踩的数量
}
message : 返回的信息 具体返回信息
}
*/
ajax('get', 'guestbook/index.php', 'm=index&a=getList&n=2&page=' + iPage, function(data) {
var d = JSON.parse(data);
var data = d.data;
if (data) {
for (var i=0; i<data.list.length; i++) {
createList(data.list[i]);
}
} else {
if (iPage == 1) {
oList.innerHTML = '现在还没有留言，快来抢沙发...';
}
oShowMore.style.display = 'none';
}
});
}
};
function getCookie(key) {
var arr1 = document.cookie.split('; ');
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split('=');
if (arr2[0]==key) {
return arr2[1];
}
}
}
留言ajax
5、canvas旋转并缩放
window.onload=function(){
var can=document.getElementById('canvas');
var canvas=can.getContext('2d');
var num=0;
var num2=0;
var value=1;
canvas.translate(100,100);
setInterval(function(){
num++;
canvas.save();
canvas.clearRect(0,0,can.width,can.height);
if(num2==100) vlaue=-1;
else if(num2==0) value=1;
num2+=value;
canvas.translate(-50,-50);
canvas.rotate(num*Math.PI/180);
canvas.scale(num2*1/50,num2*1/50);
canvas.fillRect(0,0,100,100,false);
canvas.restore();
canvas.stroke();
}, 30);
};
旋转缩放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var aInput=document.getElementsByTagName('input');
var oImg=document.getElementById('img1'); var yImg=new Image(); yImg.onload=function() {
draw(oImg);
}; yImg.src=oImg.src; function draw(obj){
var oC=document.createElement('canvas');
var canvas=oC.getContext('2d');
var iNow=1;
oC.width=obj.width;
oC.height=obj.height;
obj.parentNode.replaceChild(oC,obj);
canvas.drawImage(obj,0,0); aInput[1].onclick=function(){ if(iNow==3) iNow=0; else iNow++; toChange();
};
aInput[0].onclick=function(){
if(iNow==0) iNow=3; else iNow--;
toChange();
};
function toChange(){
switch(iNow){
case 1:
oC.width=obj.height;
oC.height=obj.width;
canvas.rotate(90*Math.PI/180);
canvas.drawImage(obj,0,-obj.height);
break; case 2:
oC.width=obj.width;
oC.height=obj.height;
canvas.rotate(180*Math.PI/180);
canvas.drawImage(obj,-obj.width,-obj.height);
break;
case 3:
oC.width=obj.height;
oC.height=obj.width;
canvas.rotate(270*Math.PI/180);
canvas.drawImage(obj,-obj.width,0);
break;
case 0:
oC.width=obj.width;
oC.height=obj.height;
canvas.rotate(0*Math.PI/180);
canvas.drawImage(obj,0,0);
break;
}
}
}
};
</script>
</head> <body>
<input type="button" value="左"/>
<input type="button" value="右"/>
<div><img src="iBannerText.png" id="img1" /></div>
</body>
</html>
旋转
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
canvas.fillRect(0,0,100,100);
var oImg=canvas.getImageData(0,0,100,100); //返回图像像素
for(var i=0; i<oImg.width*oImg.height; i++) {
oImg.data[4*i]=255; //data数组中的每个像素都rgba四个构成， length=4*w*h
oImg.data[4*i+1]=0;
oImg.data[4*i+2]=0;
oImg.data[4*i+3]=50;
}
canvas.putImageData(oImg, 100,100); //绘制图像像素至canvas中
};
canva像素操作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d'); var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onclick=function() {
var str=this.innerHTML;
var h=180;
canvas.clearRect(0, 0, oc.width, oc.height);
canvas.font=h+'px impact';
canvas.textBaseline='top';
canvas.fillStyle='red';
var w=canvas.measureText(str).width;
canvas.fillText(str, (oc.width-w)/2, (oc.height-h)/2);
var oImg=canvas.getImageData((oc.width-w)/2, (oc.height-h)/2, w,h);
canvas.clearRect(0,0,oc.width,oc.height);
var arr=randomArr(w*h,w*h/10);
var newImg=canvas.createImageData(w,h); //创建一个新的img图片像素
for(var i=0; i<arr.length; i++) {
//旧的像素数组，赋值给新的像素数组当中
newImg.data[4*arr[i]]=oImg.data[4*arr[i]];
newImg.data[4*arr[i]+1]=oImg.data[4*arr[i]+1];
newImg.data[4*arr[i]+2]=oImg.data[4*arr[i]+2];
newImg.data[4*arr[i]+3]=oImg.data[4*arr[i]+3];
} //绘制像素图片到canvas中
canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2); };
} //函数功能：iAll，iNow(原数组长度，新数组长度) 返回新的数组
function randomArr(iAll, iNow){
var arr=[];
var newArr=[];
for(var i=0; i<iAll; i++) {
arr.push(i);
}
for(var i=0; i<iNow; i++) {
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
} };
</script>
</head> <body> <canvas id="canvas" width=500 height=500></canvas>
<ul style="float:left">
<li>我</li>
<li>爱</li>
<li>你</li>
<li>吗</li>
</ul>
</body>
</html>
图片像素生产10%的图片文字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d'); var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onclick=function() {
var str=this.innerHTML;
var h=180;
var timer=null;
var iNow=0;
clearInterval(timer);
canvas.clearRect(0, 0, oc.width, oc.height);
canvas.font=h+'px impact';
canvas.textBaseline='top';
canvas.fillStyle='red';
var w=canvas.measureText(str).width;
canvas.fillText(str, (oc.width-w)/2, (oc.height-h)/2);
var oImg=canvas.getImageData((oc.width-w)/2, (oc.height-h)/2, w,h);
canvas.clearRect(0,0,oc.width,oc.height);
var arr=randomArr(w*h,w*h/10);
var newImg=canvas.createImageData(w,h); //创建一个新的img图片像素
timer=setInterval(function(){
for(var i=0; i<arr[iNow].length; i++) {
//旧的像素数组，赋值给新的像素数组当中
newImg.data[4*arr[iNow][i]]=oImg.data[4*arr[iNow][i]];
newImg.data[4*arr[iNow][i]+1]=oImg.data[4*arr[iNow][i]+1];
newImg.data[4*arr[iNow][i]+2]=oImg.data[4*arr[iNow][i]+2];
newImg.data[4*arr[iNow][i]+3]=oImg.data[4*arr[iNow][i]+3];
}
//绘制像素图片到canvas中
canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2);
if(iNow==9) {
iNow=0;
clearInterval(timer);
}
else iNow++;
}, 200); };
} //函数功能：iAll，iNow(原数组长度，新数组长度) 返回复合的数组，allArr存的就是10个元素，每个元素也是一位数组，leng=w*h;
function randomArr(iAll, iNow){
var arr=[];
var allArr=[];
for(var i=0; i<iAll; i++) {
arr.push(i);
} for(var j=0; j<iAll/iNow; j++) {
var newArr=[];
for(var i=0; i<iNow; i++) {
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
allArr.push(newArr);
} return allArr;
} };
</script>
</head> <body> <canvas id="canvas" width=500 height=500></canvas>
<ul style="float:left">
<li>我</li>
<li>爱</li>
<li>你</li>
<li>吗</li>
</ul>
</body>
</html>
动态生产每次10%文字像素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
canvas.fillRect(0,0,100,100);
var oImg=canvas.getImageData(0,0,100,100);
alert(getXY(oImg, 3, 5));
for(var i=0; i<oImg.width; i++){
setXY(oImg, i, 5, [255,0,0,255]);
canvas.putImageData(oImg,100,100);
}
function getXY(obj, x, y){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; arr[0]=d[4*(y*w+x)];
arr[1]=d[4*(y*w+x)+1];
arr[2]=d[4*(y*w+x)+2];
arr[3]=d[4*(y*w+x)+3];
return arr;
} function setXY(obj, x, y,color){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; d[4*(y*w+x)]=color[0];
d[4*(y*w+x)+1]=color[1];
d[4*(y*w+x)+2]=color[2];
d[4*(y*w+x)+3]=color[3];
}
}
</script>
</head> <body> <canvas id="canvas" width=500 height=500></canvas>
</body>
</html>
封装通过xy坐标生成像素图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
var yImg=new Image();
yImg.onload=function() {
draw(this);
};
yImg.src='2.png'; function getXY(obj, x, y){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; arr[0]=d[4*(y*w+x)];
arr[1]=d[4*(y*w+x)+1];
arr[2]=d[4*(y*w+x)+2];
arr[3]=d[4*(y*w+x)+3];
return arr;
} function setXY(obj, x, y,color){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; d[4*(y*w+x)]=color[0];
d[4*(y*w+x)+1]=color[1];
d[4*(y*w+x)+2]=color[2];
d[4*(y*w+x)+3]=color[3];
} function draw(obj) {
oc.width=obj.width;
//oc.height=2*obj.height;
canvas.drawImage(obj,0,0,obj.width, obj.height);
var oImg=canvas.getImageData(0,0,obj.width, obj.height);
var w=oImg.width;
var h=oImg.height;
var newImg=canvas.createImageData(w,h);
//先循环列
for(var i=0; i<h; i++) {
//循环行
for(var j=0; j<w; j++) {
var result=[];
var color=getXY(oImg, j, i);
result[0]=255-color[0];
result[1]=255-color[1];
result[2]=255-color[2];
result[3]=255*i/h;
setXY(newImg, j,h-i, result);
}
} canvas.putImageData(newImg, 0, obj.height);
} };
</script>
</head> <body> <canvas id="canvas"></canvas>
</body>
</html>
canvas实现图片反色、渐变、倒影
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
var yImg=new Image();
yImg.onload=function() {
draw(this);
};
yImg.src='2.png'; function getXY(obj, x, y){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; arr[0]=d[4*(y*w+x)];
arr[1]=d[4*(y*w+x)+1];
arr[2]=d[4*(y*w+x)+2];
arr[3]=d[4*(y*w+x)+3];
return arr;
} function setXY(obj, x, y,color){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; d[4*(y*w+x)]=color[0];
d[4*(y*w+x)+1]=color[1];
d[4*(y*w+x)+2]=color[2];
d[4*(y*w+x)+3]=color[3];
} function draw(obj) {
//num分块图片 w/num, h/num
var num=10;
oc.width=obj.width;
//oc.height=2*obj.height;
canvas.drawImage(obj,0,0,obj.width, obj.height);
var oImg=canvas.getImageData(0,0,obj.width, obj.height);
var w=oImg.width;
var h=oImg.height;
var newImg=canvas.createImageData(w,h);
//具体分块
var stepW=w/num;
var stepH=h/num;
for(var i=0; i<stepH; i++) {
for(var j=0; j<stepW; j++) {
//提取颜色
var color=getXY(oImg, j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
//根据num块循环，块是个二维数组（如如很多方格）
for(var k=0; k<num; k++) {
for(var l=0; l<num; l++) {
setXY(newImg, j*num+l, i*num+k, color);
}
}
}
}
canvas.putImageData(newImg,0, obj.height);
} };
</script>
</head> <body> <canvas id="canvas"></canvas>
</body>
</html>
canvas实现图片马赛克
6、html5实现的播放器
属性：
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
poster : 视频播放前的预览图片
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸(只读) 方法：
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体
事件：
loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange
HTML5 viedo属性方法事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:300px; height:30px; background:#666; overflow:hidden; position:relative;}
#div2{ width:60px; height:30px; background:red; position:absolute; left:0; top:0;} #div3{ width:300px; height:10px; background:#666; overflow:hidden; position:relative; top:10px;}
#div4{ width:60px; height:10px; background:yellow; position:absolute; left:240px; top:0;} </style>
<script> window.onload = function(){
var oV = document.getElementById('v1');
var aInput = document.getElementsByTagName('input'); var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4'); var disX = 0;
var disX2 = 0; var timer = null; aInput[0].onclick = function(){ if( oV.paused ){ oV.play(); this.value = '暂停'; nowTime();
timer = setInterval(nowTime,1000); }
else{ oV.pause(); this.value = '播放'; clearInterval(timer); } }; aInput[2].value = changeTime(oV.duration); aInput[3].onclick = function(){ if( oV.muted ){ oV.volume = 1; this.value = '静音'; oV.muted = false; }
else{ oV.volume = 0; this.value = '取消静音'; oV.muted = true; } }; aInput[4].onclick = function(){
oV.mozRequestFullScreen();
}; function nowTime(){ aInput[1].value = changeTime(oV.currentTime); var scale = oV.currentTime/oV.duration; oDiv2.style.left = scale * 240 + 'px'; } function changeTime(iNum){ iNum = parseInt( iNum ); var iH = toZero(Math.floor(iNum/3600));
var iM = toZero(Math.floor(iNum%3600/60));
var iS = toZero(Math.floor(iNum%60)); return iH + ':' +iM + ':' + iS; } function toZero(num){
if(num<=9){
return '0' + num;
}
else{
return '' + num;
}
} oDiv2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv2.offsetLeft; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX; if(L<0){
L = 0;
}
else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){
L = oDiv1.offsetWidth - oDiv2.offsetWidth;
} oDiv2.style.left = L + 'px'; var scale = L/(oDiv1.offsetWidth - oDiv2.offsetWidth); oV.currentTime = scale * oV.duration; nowTime(); };
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
}; oDiv4.onmousedown = function(ev){
var ev = ev || window.event;
disX2 = ev.clientX - oDiv4.offsetLeft; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX2; if(L<0){
L = 0;
}
else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){
L = oDiv3.offsetWidth - oDiv4.offsetWidth;
} oDiv4.style.left = L + 'px'; var scale = L/(oDiv3.offsetWidth - oDiv4.offsetWidth);
oV.volume = scale; };
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
}; }; </script>
</head> <body>
<video id="v1"> <source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source> </video><br />
<input type="button" value="播放" />
<input type="button" value="00:00:00" />
<input type="button" value="00:00:00" />
<input type="button" value="静音" />
<input type="button" value="全屏" />
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4"></div>
</div> </body>
</html>
HTML5播放器
7、地理位置、定位（后续）
js封装、简单实例源码记录的更多相关文章
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
- 百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...
- [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...
- JAVA上百实例源码以及开源项目
简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级.中级.高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情.执着,对IT的憧憬. ...
- JAVA上百实例源码网站
JAVA源码包1JAVA源码包2JAVA源码包3JAVA源码包4 JAVA开源包1 JAVA开源包2 JAVA开源包3 JAVA开源包4 JAVA开源包5 JAVA开源包6 JAVA开源包7 JAVA ...
- 45个android实例源码
分享45个android实例源码,很好很强大http://www.apkbus.com/android-20978-1-1.html andriod闹钟源代码http://www.apkbus.com ...
- 分享45个android实例源码，很好很强大
分享45个android实例源码,很好很强大 http://www.apkbus.com/android-20978-1-1.html 分享45个android实例源码,很好很强大http://www ...
- diff.js 列表对比算法 源码分析
diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...
- 分享45个android实例源码，很好很强大.收藏吧！！！
andriod闹钟源代码 http://www.apkbus.com/android-20974-1-1.html android源码分享之指南针程序 http://www.apkbus.com/an ...
随机推荐
- PHP学习心得（1）——实用脚本
<?php 来表示 PHP 标识符的起始,然后放入 PHP 语句并通过加上一个终止标识符 ?> 来退出 PHP 模式 调用函数phpinfo(),将会看到很多自己系统的信息,以及预定义变量 ...
- php基础排序算法 冒泡排序 选择排序 插入排序 归并排序 快速排序
<?php$arr=array(12,25,56,1,75,13,58,99,22);//冒泡排序function sortnum($arr){ $num=count($arr); ...
- svn/git的diff、patch
svn/git的diff.patch 前几天,正当我突突的写代码,企业微信嘀嘀一声响”在不,过来帮我看个bug”.本人一向助人为乐,高兴的冲了过去,然后就开始了一段长达1分钟的问题描述.很明显,此同学 ...
- 在VS的EF中连接MySQL
VS没有主动提供那些繁多的连接器,需要的话得自己再安装这些第三方程序包. MySQL为windows平台开发者提供了许多程序包:http://dev.mysql.com/downloads/windo ...
- Java中获取键盘输入值的三种方法
Java中获取键盘输入值的三种方法 Java程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值 ...
- Nginx反向代理配置可跨域
由于业务需要,同一项目中的前端代码放在静态环境中,而后端代码放在tomcat中,但此时问题却出现了:前端使用ajax请求后端获取数据时出现如下报错 XMLHttpRequest cannot load ...
- cs231n笔记：线性分类器
cs231n线性分类器学习笔记,非完全翻译,根据自己的学习情况总结出的内容: 线性分类 本节介绍线性分类器,该方法可以自然延伸到神经网络和卷积神经网络中,这类方法主要有两部分组成,一个是评分函数(sc ...
- Struts2学习笔记
一.struts2的工作原理 上图为struts整体结构. 1.客户端初始化一个指向servlet的请求: 2.请求通过一系列过滤器(其中的ActionContextCleanUp为可选过滤器,对st ...
- Windows 下安装cryptography-1.6
由于proxy限制不能使用pip install cryptography命令安装cryptography,所以安装这个python库折腾了一天多的时间,差点就怀疑人生了,好在柳暗花明,惊喜出现了.下 ...
- C#连接数据库SQL,并转换成list形式
web config 配置 <connectionStrings> <add name="SQLConnString" connectionString=& ...