廢話不多說 代碼擼起來
一 ，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>