记大挑项目

  一些简单的js相关问题

1、【jquery】简单的事件问题:(利用bind同时绑定多个事件程序)

$(function(){
    $("#photo").bind({
        mouseover:function(){$(".introduce").css("display","block");},
        mouseout:function(){$(".introduce").css("display","none");}
    });
});

通过返回false来取消默认的行为并阻止事件起泡。

[js]通过获取getElementsByClassName获取元素应按照数组方式进行操作;

var oPtoto=document.getElementById('photo');
var oIntroduce=document.getElementsByClassName('introduce');
oPtoto.onmouseover=function(){
    oIntroduce[0].style.display='block';
};
oPtoto.onmouseout=function(){
    oIntroduce[0].style.display='none';
};

2、利用js获取当前时间,date是内置对象

var today=new Date();
var s=today.getFullYear()+"."+today.getMonth()+"."+today.getDate()+
        " "+today.getHours()+":"+today.getMinutes();

3、简单的留言板问题

var oMsg = document.getElementById("msg");
var oBtn = document.getElementById("btn");
var oMsg_c = document.getElementById("msg_c");
var oUl = document.createElement("ul");
var today=new Date();
var s=today.getFullYear()+"."+today.getMonth()+"."+today.getDate()+
        " "+today.getHours()+":"+today.getMinutes();

oMsg_c.appendChild(oUl);
oBtn.onclick = function(){
    var sVal = oMsg.value;
    var oli = document.createElement("li");
    oli.innerHTML = s+sVal + " <span style='color:#46b8da;'>删除</span>";
    var oli1 = oUl.getElementsByTagName("li");
    if(oli1.length>0){
        oUl.insertBefore(oli,oli1[0]);
    }else{
        oUl.appendChild(oli);
        oMsg_c.style.display='block';
    }
    oMsg.value='';
    var oSpan = document.getElementsByTagName("span");
    for(var i=0; i<oSpan.length; i++){
        oSpan[i].onclick = function(){
            oUl.removeChild(this.parentNode);
            oMsg_c.style.display='none';
        }
    }
};
<div id="msg_c"></div>
<input id="msg" type="text" size="100" value="" style="height: 60px;">
<input id="btn" type="button" value="我要评论">

感觉自己关于js真的学的很烂,还是要加油呀!多敲多练吧。

IT文库 » 记大挑项目
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址