一、时间绑定的方法
1、在Dom元素上直接绑定
<input type="button" value="点我呦" οnclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" οnclick="testAlert()">
<script type="text/javascript">
function testAlert(){
alert("hello world!");
}
</script>
2、js代码中绑定
<input type="button" value="点我呦" id="demo">
<script type="text/javascript">
document.getElementById("demo").οnclick=function testAlert(){
alert("hello world!");
}
</script>
3、绑定事件监听函数
这里需要了解addEventListener()和attachEvent()的函数语法。
1 elementObject.addEventListener(eventName,handle,useCapture) (支持主流浏览器、以及IE9.0及以上)
eventName:要绑定的事件名称。注意写法,比如点击事件,写成click,而不是onclick.
handle: 处理事件的函数名。但是写法上没有小括号。
useCapture:Boolean类型,是否使用捕获,一般用false,具体涉及到的会在后边总结。
2 elementObject.attachEvent(eventName,handle);(仅支持IE8及以下)
从网上找到了一个兼容的好办法,相比较if。。else语句,这个方法用的是try..catch错误处理语句,可以避免浏览器出现错误提示。
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期浏览器
}
}
}
二、jquery中几种事件绑定方法
主要有on()、bind()、live()、delegate()等几种,相对应的解绑就是off()、unbind()、live()、undelegate();
1 on()、bind()、live()、delegate()中除了bind(),其他的都可以给后来追加的元素对象添加绑定事件。
2 这几种方法中各自有对应支持的JQuery版本。
3 在给动态添加的页面元素绑定事件时,通常用on()方法。
三、将location.search转化为对象的形式{}
function formateSearch(se){
if(typeof se!=="undefined"){
se=se.substr(1);
var arr=se.split("&"),
obj={},newarr=[];
$.each(arr,function(i,v){
newarr=v.split("=");
if(typeof obj[newarr[0]]==="undefined"){
obj[newarr[0]]=newarr[1];
}
});
return obj;
}
}
4、设置、获取、移除cookie
document.cookie='ac=123';
//设置一个cookie
function setCookie(name,value,iDay){
if(iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+';path=/;expires='+oDate;
}else{
document.cookie=name+'='+value+';path=/';
}
}
setCookie('asd','123');
setCookie('qwe','rdf',3);
//获取一个cookie
function getCookie(name){
var arr=document.cookie.split(';');
for(var i=0;i<arr.length;i++){
var tmp=arr[i].split('=');
if(name==tmp[0]){
return tmp[1];
}
}
return '';
}
//删除一个cookie
function removeCookie(name){
setCookie(name,'asd',-1);
}
removeCookie('asd');
五、轮播图实现
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:20px;
}
#container{
position: relative;
width:600px;
height:400px;
border:3px solid #333;
overflow: hidden;
}
#list{
position: absolute;
z-index:1;
width:4200px;
height:400px;
}
#list img{
float:left;
width:600px;
height:400px;
}
#button{
position: absolute;
left:250px;
bottom:20px;
z-index:2;
height:10px;
width: 100px;
}
#button span{
float:left;
margin-right:5px;
width:10px;
height:10px;
border:1px solid #fff;
border-radius:5px;
-webkit-border-radius:5px;
background-color: #333;
cursor:pointer;
}
#button .on{
background-color: orangered;
}
.arrow{
position: absolute;
top:180px;
z-index:2;
display: none;
width: 40px;
height:40px;
font-size:36px;
font-weight:bold;
line-height:39px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
cursor:pointer;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px;">
<img src="6.jpg" alt="1">
<img src="3.jpg" alt="1">
<img src="4.jpg" alt="2">
<img src="5.jpg" alt="3">
<img src="6.jpg" alt="4">
<img src="3.jpg" alt="4">
</div>
<div id="button">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var list=document.getElementById('list');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
if(newLeft<-2400){
list.style.left=-600+'px';
}
if(newLeft>-600){
list.style.left=-2400+'px';
}
}
//实现自动轮播效果
var timer=null;
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
play();
var container=document.getElementById('container');
function stop(){
clearInterval(timer);
}
container.οnmοuseοut=play;
container.οnmοuseοver=stop;
var buttons=document.getElementsByTagName('span');
var index=1;
function buttonsShow(){
//先清除之前的样式
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
}
}
//数组从0开始
buttons[index-1].className='on';
}
prev.οnclick=function(){
index-=1;
if(index<1){
index=4;
}
console.log(index);
buttonsShow();
animate(600);
}
next.οnclick=function(){
index+=1;
if(index>4){
index=1;
}
console.log(index);
buttonsShow();
animate(-600);
}
//这里使用了闭包
for (var i = 0; i < buttons.length; i++) {
// 这里使用的是立即执行函数,
(function(i) {
buttons[i].onclick = function() {
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (index - clickIndex);
animate(offset);
index = clickIndex;
buttonsShow();
}
})(i)
}
}
</script>
</body>
</html>