美文网首页
JavaScript 一些小问题

JavaScript 一些小问题

作者: 流蓝浅 | 来源:发表于2018-03-14 08:47 被阅读0次
图片.png

小球移动:

ody>
        <div id="container">
            <div id="boll">
                
            </div>
            
        </div>
        <button onclick="start()">绣球寻夫记</button>
        <script type="text/javascript">
            var timer;
            var _boll = document.getElementById("boll");
            
            function start() {
                timer = setInterval(function() {
                    var x = _boll.offsetLeft;
                    var y = _boll.offsetTop;
                    if (x >= 1180) {
                        clearInterval(timer)//停止
                    }
                    x += 5;
                    y += 2;
                    _boll.style.left = x + "px";
                    _boll.style.top = y + "px";
                },50)
                
            }
        </script>

滚动抽奖

    <style type="text/css">
            #box {
                height: 400px;
                width: 400px;
                border: 1px solid #98FB98;
                margin: 200px;
                margin-top: 20px;
                text-align: center;
            }
            .msg,.active{
                height: 150px;
                width: 150px;
                background: #A52A2A;
                border-radius: 50%;
                margin: auto;
                text-align: center;
                line-height: 150px;
                color: white;
                font-size: 20px;
                margin-top: 50px;
            }
            #box>button {
                width: 100px;
                height: 40px;
                background: greenyellow;
                color: red;
                margin-top: 20px;
                
            }
            .active {
                background: gold;
                border: 2px solid springgreen;
            }
        </style>
        
        
        
    </head>
    <body>
        <div id="box">
            <div id="prize" class="msg">
                奖品
            </div>
            <button onclick="play()" id="play">开始抽奖</button>
        </div>
        <script type="text/javascript">
            
            var goods = ["iPhoneX","报纸","抽纸","娃娃","杯子","气球","再来一次","谢谢惠顾","打火机"];
            var _prize = document.getElementById("prize");
            var _play = document.getElementById("play"); 
            var flag = true;
            var timer;
            function play() {
                if (flag) {
                    flag = false;
                    _play.textContent = "停止抽奖";
                    _prize.className = "active";
                    timer = setInterval(function() {
                        var index = Math.floor(Math.random()*goods.length);
                        _prize.textContent = goods[index];
                    },10);
                } else {
                    flag = true;
                    clearInterval(timer);
                    _prize.className = "msg";
                    _play.textContent = "开始抽奖";
                }
                
                
                
            }
            
        </script>

div 移动

<style type="text/css">
            #box {
                height: 100px;
                width: 100px;
                background: cyan;
                position: absolute;
                cursor: move;
            }
        </style>
        <script type="text/javascript">
            window.onload = init;
            function init() {
                
                var _box = document.getElementById("box");
                _box.onmousedown = function(e) {
                    var _x = e.clientX - _box.offsetLeft;
                    var _y = e.clientY - _box.offsetTop;
                    document.onmousemove = function(ev) {
                        _box.style.left = ev.clientX - _x + "px";
                        _box.style.top = ev.clientY - _y + "px";
                    }
                }
                
                _box.onmouseup = function() {
                    document.onmousemove = null;
                }
            }
        </script>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>

This inspection detects names that should resolve but don't.
Due to dynamic dispatch and duck typing, this is possible in
a limited but useful number of cases.
Top-level and class-level items are supported better than instance items.

s[1:6:2]
s[::-1]
s[::2]
s[12:-5]

python中的可变类型有列表list和字典dict______,
不可变类型有:整型int、浮点型float、字符串型string和元组tuple
Python提供了两个对象比较操作符 ==____和is

来测试两个变量是否指向同一个对象,也可以通过内建函数_type(obj)来测试对象的类型.
boundary 边界

unpack 拆包

x, y, z = eval(input("请输入三个数字:"))

interval 间隔
client 客户
browser 浏览器

三种事件绑定方式

            /**
             * 在JavaScript中有三种事件绑定方式
             * 
             *  在dom0模型下,有两种方式
             *      
             *      1、在标签内通过属性的方式绑定,不推荐
             * 
             *      2、先获取dom对象,在使用属性的方法绑定 点击推荐
             *      
             * 
             *  在dom2模型下,有一种方式
             *      3、事件监听 
             * 
             */
//          function test01(node) {
//              console.info(node)
//              alert("惊喜有木有!!");
//          }

            window.onload = init;
            
            function init() {
                /**
                 * 页面加载完成
                 */
                var _btn = document.getElementById("btn");
                
//              _btn.onclick = function(e) {
//                  // 第一个形参是事件对象
//                  console.info(e);
//                  /**
//                   * 在事件中,this关键字执行事件源
//                   * 
//                   */
//                  console.info(this);
//                  alert("successful");
//              }

                _btn.addEventListener("click",function(e) {
                    console.info(e);
                    alert("123456");
                },true)

//              document.addEventListener("click",function() {
//                  alert("document要点击事件")
//              })
                
                document.getElementById("usename").onfocus = function() {
                    document.getElementById("msg").innerText = "密码不能少于5位";
                }
                
                document.getElementById("usename").onblur = function() {
                    document.getElementById("msg").innerText = "";
                    if (this.value.length < 6) {
                        alert("密码长度不能小于6为")
                    }
                }



            }

一些事件

                onabort 图像加载被中断 1 3 4 
              
                onblur 元素失去焦点 1 2 3 
                onfocus 元素获得焦点 1 2 3 
                
                onchange 用户改变域的内容 1 2 3 
                
                onclick 鼠标点击某个对象 1 2 3 
                ondblclick 鼠标双击某个对象 1 4 4 
                
                onerror 当加载文档或图像时发生某个错误 1 3 4
                
                onkeydown 某个键盘的键被按下 1 4 3 
                onkeypress 某个键盘的键被按下或按住 1 4 3 
                onkeyup 某个键盘的键被松开 1 4 3 
                
                onload 某个页面或图像被完成加载 1 2 3 
                
                onmouseup 某个鼠标按键被松开 1 4 4 
                onmousedown 某个鼠标按键被按下 1 4 4 
                
                onmousemove 鼠标被移动 1 6 3 
                
                onmouseout 鼠标从某元素移开 1 4 4
                onmouseover 鼠标被移到某元素之上 1 2 3 
                
                onmouseenter
                onmouseleave
                
                onreset 重置按钮被点击 1 3 4 
                onresize 窗口或框架被调整尺寸 1 4 4 
                onselect 文本被选定 1 2 3 
                onsubmit 提交按钮被点击 1 2 3 
                onunload 用户退出页面 1 2 3 

相关文章

  • JavaScript 一些小问题

    小球移动: 滚动抽奖 div 移动 This inspection detects names that shou...

  • ES6新增的数据类型Map和Set

    Javascript的默认对象表示方式 {} ,即一组键值对。 但是Javascript的对象有个小问题,就是键必...

  • 一些小问题

    为什么神经网络要用cross entropy? 因为用MSE时,和softmax 结合输出时会出现非凸问题 为什么...

  • 一些小问题

    1、error: more than one device/emulatorcmd命令adbshell多个emul...

  • 一些小问题

    时间与空间,这两种超级体系一直让人类望而生畏,一直琢磨不透。至少对于目前的我来说,是这样的。现今对时间与空间的结论...

  • 一些小问题

    linux系统每次开机,系统时间都恢复到设置之前不能联网, 设置系统时间,把写入硬件$ date -s '2019...

  • 一些小问题

    我一直有一些小问题,貌似存在这些问题的人还不少,但我觉着我这病情在这些人中属病入膏肓的程度了,甚至可以说,我不经觉...

  • 一些小问题

    1.Mybatis-Plus Update继承BaseMapper,set的值不能为空,为空的话等于忽略。 用l...

  • 92/100 第二个小问题

    第一个小问题,是遇到一个不听话的下属, 第二个小问题,是旅游遇到的一些小问题。

  • 报错'$' is not defined no

    我们来解决一个小问题吧。在React怎样引入jQuery。不断会有人遇到一些小问题,卡在上面N久,所以小问题也写下...

网友评论

      本文标题:JavaScript 一些小问题

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