jyukutyo · November 29, 2013 00:49
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <script src="./jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .text {
            font-size: 100px;
        }

        .text-large {
            font-size: 150px;
        }

        #winner {
            margin-top: 50px;
            height: 400px;
        }

        .btn {
            font-size: 80px;
            width: 300px;
            height: 150px;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body>
 <div class="container">
    <div id="winner" class="row">
        <div class="row">
            <div id="dept" class="text-center text-danger text col-md-6">
            </div>
            <div id="team" class="text-center text-danger text col-md-6">
            </div>
        </div>
        <div class="row">
            <div id="name" class="text-center text-danger text-large">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 text-center">
            <button class="btn btn-primary btn-lg" onclick="startDrawing()">start!</button>
        </div>
        <div class="col-md-6 text-center">
            <button class="btn btn-success btn-lg" onclick="stopDrawing()">stop!</button>
        </div>
    </div>
 </div>
 <script type="text/javascript">

    var depts = ["開発1","開発2","開発3"];
    var teams = ["A", "B", "C"];

    var names = [
        {"dept": "開発1", "team": "A", "name": "alice"},
        {"dept": "開発2", "team": "B", "name": "bob"},
        {"dept": "開発3", "team": "C", "name": "cindy"}
    ];

    var deptTimer;
    var teamTimer;
    var nameTimer;
    var interval;

    var deptLength = depts.length;
    var teamLength = teams.length;
    var nameLength = names.length;

    function startDrawing() {
        clearInterval(interval);

        var d = function () {
            clearTimeout(deptTimer);
            $("#dept").text(depts[Math.floor(Math.random() * deptLength)]);
            deptTimer = setTimeout(d, 100);
        };
        var t = function () {
            clearTimeout(teamTimer);
            $("#team").text(teams[Math.floor(Math.random() * teamLength)]);
            teamTimer = setTimeout(t, 100);
        };
        var n = function () {
            clearTimeout(nameTimer);
            $("#name").text(names[Math.floor(Math.random() * nameLength)].name);
            nameTimer = setTimeout(n, 100);
        };
        d();
        t();
        n();
    }

    function stopDrawing() {
        var f = function () {

            var person = names[Math.floor(Math.random() * names.length)];

            clearTimeout(deptTimer);
            $("#dept").text(person.dept);
            setTimeout(function() {
                clearTimeout(teamTimer);
                $("#team").text(person.team);
            }, 1000);
            setTimeout(function() {
                clearTimeout(nameTimer);
                $("#name").text(person.name);
            }, 2000);

            setTimeout(function() {
                interval = setInterval(function () {
                    $('.text, .text-large').fadeOut(300, function () {
                        $(this).fadeIn(300)
                    });

                }, 1500);
            }, 3000);

        };
        f();
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="./jquery-2.0.3.min.js"></script>
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<style>
	.text {
	font-size: 100px;
	}

	.text-large {
	font-size: 150px;
	}

	#winner {
	margin-top: 50px;
	height: 400px;
	}

	.btn {
	font-size: 80px;
	width: 300px;
	height: 150px;
	}
	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
	<div class="container">
	<div id="winner" class="row">
	<div class="row">
	<div id="dept" class="text-center text-danger text col-md-6">
	</div>
	<div id="team" class="text-center text-danger text col-md-6">
	</div>
	</div>
	<div class="row">
	<div id="name" class="text-center text-danger text-large">
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-md-6 text-center">
	<button class="btn btn-primary btn-lg" onclick="startDrawing()">start!</button>
	</div>
	<div class="col-md-6 text-center">
	<button class="btn btn-success btn-lg" onclick="stopDrawing()">stop!</button>
	</div>
	</div>
	</div>
	<script type="text/javascript">

	var depts = ["開発1","開発2","開発3"];
	var teams = ["A", "B", "C"];

	var names = [
	{"dept": "開発1", "team": "A", "name": "alice"},
	{"dept": "開発2", "team": "B", "name": "bob"},
	{"dept": "開発3", "team": "C", "name": "cindy"}
	];

	var deptTimer;
	var teamTimer;
	var nameTimer;
	var interval;

	var deptLength = depts.length;
	var teamLength = teams.length;
	var nameLength = names.length;

	function startDrawing() {
	clearInterval(interval);

	var d = function () {
	clearTimeout(deptTimer);
	$("#dept").text(depts[Math.floor(Math.random() * deptLength)]);
	deptTimer = setTimeout(d, 100);
	};
	var t = function () {
	clearTimeout(teamTimer);
	$("#team").text(teams[Math.floor(Math.random() * teamLength)]);
	teamTimer = setTimeout(t, 100);
	};
	var n = function () {
	clearTimeout(nameTimer);
	$("#name").text(names[Math.floor(Math.random() * nameLength)].name);
	nameTimer = setTimeout(n, 100);
	};
	d();
	t();
	n();
	}

	function stopDrawing() {
	var f = function () {

	var person = names[Math.floor(Math.random() * names.length)];

	clearTimeout(deptTimer);
	$("#dept").text(person.dept);
	setTimeout(function() {
	clearTimeout(teamTimer);
	$("#team").text(person.team);
	}, 1000);
	setTimeout(function() {
	clearTimeout(nameTimer);
	$("#name").text(person.name);
	}, 2000);

	setTimeout(function() {
	interval = setInterval(function () {
	$('.text, .text-large').fadeOut(300, function () {
	$(this).fadeIn(300)
	});

	}, 1500);
	}, 3000);

	};
	f();
	}
	</script>
	</body>
	</html>