废话不多说 代码撸起来
一 ,js封装方法
function change(){
window.onload = function(){
var box = document.getElementById("box");
box.onclick = function(){
this.style.background = "black";
};
//hover事件
box.onmouseover = function(){
this.style.background = "blue"
};
//双击事件
box.ondblclick = function(){
this.style.background = "yellow";
}
}
};
调用方法:
<script>
change()
</script>
二,jquery组件封装
(function ($) {
$.fn.typewriter = function () {
var $ele = $(this), str = $ele.html(), progress = 0;
$ele.html('');
var timer = setInterval(function () {
var current = str.substr(progress, 1);
if (current == '<') {
progress = str.indexOf('>', progress) + 1;
} else {
progress++;
}
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
if (progress >= str.length) {
clearInterval(timer);
}
}, 75);
};
})(jQuery);
调用方法
<script type="text/javascript">
$(function () {
$("#code").typewriter();
});
</script>