美文网首页斯诺技术分享
面向对象的点名器

面向对象的点名器

作者: 小哪吒 | 来源:发表于2017-05-24 14:19 被阅读17次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #d1{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        #btn{
            width: 100px;
            height: 100px;
            margin: 0px 620px;
        }
    </style>
</head>
<body>
    <p>
        首先,先找变量,把变量给初始化,然后用原型定义方法,在这个方法里写要执行的内容,内容包括点击事件以及点击事件调用的函数。(记住要实例化和赋值),就好了!
    </p>
    <div id="dd">
        <div id="d1"></div>
        <button id="btn">点名</button>
    </div>
</body>
<script>
    window.onload=function(){
        var a1=['方丈','住持','剑侠客','小龙女','杨过','郭靖','郭钰涛','流精欲','半藏','幼儿源','DVA','黑影','勇锅','大姐','家林','假萌哼','航哥','剑阁'];
        var t1=new Tab('dd','d1','btn');
        t1.wc(a1);
    }
    var timer =null;
    function Tab(dd,d1,btn){
        this.oDiv=document.getElementById(dd);
        this.oDiv1=document.getElementById(d1);
        this.oBtn=document.getElementById(btn);
    }
    Tab.prototype.wc=function(arr){
        var that=this;
        this.oBtn.onclick=function(){
            if(that.oBtn.innerHTML=='点名'){
                timer = setInterval(run,50); 
                that.oBtn.innerHTML='暂停吧';
            }else{
                clearInterval(timer);
                that.oBtn.innerHTML='点名';
            }
        }
        function run(){
            var star=Math.round(Math.random()*18);
                that.oDiv1.innerHTML=arr[star];
        }
    }
</script>
</html>

相关文章

  • 面向对象的点名器

  • 面向对象、设计原则、设计模式、编程规范、重构,这五者有何关系?

    面向对象 主流编程范式分为以下3种 面向对象 面向过程 函数式编程 面向对象需要掌握的7个知识点 面向对象四大特性...

  • 类内全局变量,共有私有,构建析构

    竟然面向对象,那就即使不会面向对象也要尽量面向对象今天小写一会python,总结这么一点点。

  • Python学习-面向对象

    查看所有Python相关学习笔记 面向对象 面向对象知识点汇总: 面向对象静态属性实例属性(self)静态方法(@...

  • 对象-面向对象简介

    面向对象:是一种思想,不是具体的语言 对比面向过程: 面向过程:思考的切入点是功能的步骤 面向对象:思考的切入点是...

  • 对象

    面向对象:点餐的菜单是直接面对点菜,这是面向对象。 面向对象过程:后厨厨师做饭,如何做,先放什么后放什么。 *对象...

  • java总结

    Java是一门面向对象编程语言. java知识点梳理 java面向对象的特点java面向对象的三个基本特性: 封...

  • PHP全栈学习笔记8

    面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类。 类...

  • PHP全栈学习笔记8

    面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类。 类...

  • lesson 5 面向对象及原型链 2021-04-29

    课程标题 面向对象及原型链 课程目标 面向对象思想 原型及原型链 继承 知识点 面向对象思想 原型链的指向 new...

网友评论

    本文标题:面向对象的点名器

    本文链接:https://www.haomeiwen.com/subject/vqfoxxtx.html