JSFiddle

  • lottery

    简单的随机抽奖的

    <h1>lottery</h1>
    <div id="box"></div>
  • 零时写测试例子的

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="box">
        <div class="parent">
            <dl>
                <dt>图片1</dt>
                <dd>图片描述1</dd>
            </dl>
            <dl>
                <dt>图片2</dt>
                <dd>图片描述2</dd>
            </dl>
            <dl>
                <dt>图片3</dt>
                <dd>图片描述3</dd>
            </dl>
        </div> 
    </div>
  • js去重的几种方式 #2 is the latest revision

    利用插入排序,空对象,空数组等方式

    /*
     * 几种常用的去重的方式
    */
    
        var arr = [2, 6, 1, 15, 11, 7, 12, 8, 5, 4, 3, 12, 10, 1, 7, 2, 4 ...
  • HTML5闹钟 #1 is the latest revision

    IE9++

    
    var Clock = (function(){
    
    	var exports = function(element) {
    		this._element = element;
    		var html = '';
    		for (var i=0;i<6;i++) {
    			html += '<span>&nbsp;</span>';
    		}
    		this._element.innerHTML ...</6;i++)>
  • 键盘游戏 - 观察者模式示例

    使用观察者模式来完成中介者模式中用到的"键盘游戏"的例子

    // 通用发布者对象
    var publisher = {
        subscribers : {
            any : []
        },
        // 将订阅者提供的调用方法添加到subscribers 订阅的事件数组中
        on : function(type, fn, context) {
            type = type || 'any';
            // 如果提供的只是一个函数 fn就是函数,如果提供的是一个对象的方法那么就是context[fn]
            fn ...
  • js-observer(观察者模式,订阅/发布模式) #10 is the latest revision

    最主要就2个对象,观察者以及目标对象

        
    /*
     * js 观察者模式 又称 订阅/发布模式
     * 通过创建“可观察”对象,当发生一个感兴趣的事件时可将该事件通告给
     * 所有观察者,从而形成松耦合
    */
    
    // 通用的发布者
    var publisher = {
    
        subscribers : {
            any : []    // 事件类型: 订阅者
        },
    
        // 将订阅者提供的调用方法添加到subscribers 订阅的事件数组中 ...
  • js-mediator(中介者模式) #7 is the latest revision

    通过使你的对象之间相互不直接'通话',而是仅通过一个中介者对象进行通信

    /**
     * js中介者模式
     * 通过使你的对象之间相互不直接'通话',而是仅通过一个中介者对象进行通信(飞机场的塔台),从而促进形成松耦合(降低相互依赖关系)
     * 示例说明:主要有3个参与者,玩家1,玩家2,中介者
     * 玩家1 2是通过Play构造函数生成,有2个属性,玩家名称,玩家点击的次数,
     * 计分板(scoreboard)负责更新html通过中介者传进的数据 ...
  • 面试题-360

    让容器内的文本元素每一秒减1,直到为0时,停止递减。

    function $(id) {
        return document.getElementById(id);
    }
    function setText(node, text) {
        if(typeof node.innerText === 'string') {
            node.innerText = text;
        } else {
            node ...
  • js-proxy(代理模式)

    为其他对象提供一种代理以控制对这个对象的访问

    var $ = function (id) {
            return document.getElementById(id);
    };
    
    var http = {
        makeRequest: function (ids, callback) {
            var url = 'http://query.yahooapis.com/v1 ...
  • js-facade(外观模式)

    通常把常用方法包装到一个新方法中,从而提供一个更为便利的API

    /** 
     * facade 外观模式 通常把常用方法包装到一个新方法中,从而提供一个更为便利的API.其实这个大家平时经常用。特别是处理兼容性脚本时
     * 比如:不同浏览器的事件处理程序,事件对象的差异,可以包装为一个方法,内部怎么去执行,不影响使用者的操作。
    */
    
    // innerText getStyle跨浏览器兼容的对外API
    var myUtil = {
    	getInnerText : function(element) {
            return ...