zoukankan      html  css  js  c++  java
  • 一个层动态放大的例子的一些知识点

    这个其实很简单,只是自己平时疏于练习,会忘记,现在记下来。先看代码:

    <div id="div1" style="5px;height:5px;border-style:solid;border-color:Red;border-1px;background-color:Yellow;overflow:hidden;">
    案例:点击按钮层动态变大。提示:英文字母连续单词不会在中间自动换行的陷阱。
    案例:点击按钮层动态变大。提示:英文字母连续单词不会在中间自动换行的陷阱。
    点击【动态放大】按钮,文字会动态的变大。
    </div>
    <input type="button" value="动态放大" onclick="showDiv();" />
    

    下来是JS代码:

    var showIntervalId;
            function showDiv() {
                showIntervalId = setInterval("inc()", 100);
            }
            function inc() {
                var div1 = document.getElementById('div1');
                var oldwidth = div1.style.width;
                oldwidth = parseInt(oldwidth, 10);//这个parseInt应该是吧oldwidth转换为整数吧
                var oldheight = div1.style.height;
                oldheight = parseInt(oldheight, 10);
                if (oldwidth >= 200) {//如果宽度涨到了200,停止计时器、停止继续动画长大
                    clearInterval(showIntervalId);
                    //停止计时器
                }
                oldwidth += 10;
                oldheight += 10;
                div1.style.width = oldwidth + "px";
                div1.style.height = oldheight + "px";
            }
           
    

    知识点一:var showIntrevalId=setInterval("inc()",100),clearInterval(showIntervalId).

    首先,这个两个方法一定要配对使用,其次,这两个方法要放在不同的函数里,最后,setInterval的第一个参数是要调用的函数,

    第二个参数是每次调用的频率(时间为单位,毫秒)。

    知识点二:parseInt(string, radix)函数可解析一个字符串,并返回一个整数。

    上面parseInt(oldheight,10),是吧oldheight转换为十进制,其中oldheight初始值为5px

  • 相关阅读:
    VM虚拟机Linux和主机数据传输
    Linux CentOS 虚拟机下联网
    SQL 注入漏洞
    BurpSuite 各模块使用
    御剑指纹识别
    C#数组2(多维数组)
    C#数组1
    C#简单的枚举及结构
    ABAP性能1 | LOOP嵌套LOOP代码分析 (转)
    占位符使用(竖式计算)
  • 原文地址:https://www.cnblogs.com/huaizuo/p/2172106.html
Copyright © 2011-2022 走看看