zoukankan      html  css  js  c++  java
  • js之定时器操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pmd{
                200px;
                height: 100px;
                color: red;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-100px;
    
            }
    
    
        </style>
    </head>
    <body>
     <div class="pmd" id="i1"  >快看我写了个跑马灯</div>
     <div id="i2" class="pmd" style="margin-top: 200px" >这是一个滚动播放的内容</div>
    
    </body>
    
    <script>
        //创建一个定时器
    
        //setInterval('alert(123)',2000)
    
        //定义一个函数
    
        function f1(data) {
            alert(data);
        }
    
        //调用函数 注意用''将函数括起来
        //也可以写成
        //setInterval(function(){ f1("这是一个弹窗")},2000)
    
        //setInterval('f1("这是一个弹窗")',2000)
    
        //跑马灯 替换第一个字符到最后
        function f2() {
            var tag=document.getElementById('i1');
            var content=tag.innerText
            var f=content.charAt(0)
            var l=content.substring(1,content.length)
            var new_content=l+f;
            tag.innerText=new_content;
        }
        //定时执行
        setInterval('f2()',100)
        //替换最后一个字符到最前面 嘿嘿嘿
        function f3() {
            var tag=document.getElementById('i2');
            var content=tag.innerText
            var length=content.length-1
            var f=content.charAt(length)
            var l=content.substring(0,content.length-1)
            var new_content=f+l;
            tag.innerText=new_content;
            console.log()
        }
        setInterval('f3()',500)
    
    </script>
    </html>
    

      

  • 相关阅读:
    Linux开机启动详解
    git配置多用户多平台
    CentOS7 启动docker.service失败(code=exited, status=1/FAILURE)
    Linux 利用lsof命令恢复删除的文件
    56.storm 之 hello world (集群模式)
    55.storm 之 hello word(本地模式)
    54.Storm环境搭建
    53.storm简介
    深入浅出Mybatis-分页
    storm:最火的流式处理框架
  • 原文地址:https://www.cnblogs.com/randomlee/p/9716405.html
Copyright © 2011-2022 走看看