2019-04-15 时间对象、练习图片切换、倒计时、字符串操作、字符串截取、字符串截取练习

时间对象

<body>
        <p id="box"></p>
        <script type="text/javascript">
            function getTime(){
                var myDate=new Date();
                var year=myDate.getFullYear();
                var month=myDate.getMonth()+1;//月份从0开始
                var date=myDate.getDate();
                var day=myDate.getDay();//周几1-6代表周一到周6,0代表周日
                var hour=myDate.getHours();
                var min =myDate.getMinutes();
                var sec=myDate.getSeconds();
                console.log(year);
                var strDate=getTwo(year)+'-'+ getTwo(month)+'-' +getTwo(date)+' '+getTwo(hour)+':' +getTwo(min)+':'+getTwo(sec) 
                document.getElementById('box').innerHTML=strDate;
            }
            function getTwo(date){
                if(date<10){
                    date='0'+date;
                }
                return date;
            }
            setInterval(function(){
                getTime();
            },1000);
             getTime();
        </script>

练习图片切换

<body>
        <p id="box"></p>
        <p id="imgtime">
            <img src="img/0.JPG" >
            <img src="img/0.JPG" >
            <img src="img/colon.JPG" >
            <img src="img/0.JPG" >
            <img src="img/0.JPG" >
            <img src="img/colon.JPG" >
            <img src="img/0.JPG" >
            <img src="img/0.JPG" >
        </p>
        <script type="text/javascript">
            var oImg=document.getElementById('imgtime');
            function getTime(){
                var myDate=new Date();
                var hour=myDate.getHours();
                var min =myDate.getMinutes();
                var sec=myDate.getSeconds();
                var strDate=getTwo(hour)+':' +getTwo(min)+':'+getTwo(sec) 
                document.getElementById('box').innerHTML=strDate;
                // charAt();截取字符 如:'hello'.charAt()
                for(var i=0;i<strDate.length;i++){
                    var num=strDate.charAt(i);
                    if(i !=2 &&i != 5 ){
                        oImg.getElementsByTagName('img')[i].src='img/'+num+'.JPG'
                    }
                }
            }
            function getTwo(date){
                if(date<10){
                    date='0'+date;
                }
                return date;
            }
            
            setInterval(function(){
                getTime();
            },1000);
             getTime();
        </script>
    </body>

倒计时

<p id="datetime"></p>
        <script type="text/javascript">
            
            var timer = null;
            function test(){
                var myDate1 = new Date(2019,3,15,18,39,10);
                var myDate2 = new Date();
                var times = Math.floor((myDate1-myDate2)/1000);
                if(times <= 0){
                    clearInterval(timer);
                }
                document.getElementById('datetime').innerHTML = Math.floor(times/86400)+'天'+Math.floor(times%86400/3600)+'小时'+Math.floor(times%86400%3600/60)+'分'+Math.floor(times%60)+'秒';         
                };
//           天:Math.floor(t/86400)
//           时:Math.floor(t%86400/3600)
//           分:Math.floor(t%86400%3600/60)
//           秒:Math.floor(t%60)
            
        test();
        timer = setInterval(function(){
            test();
        },1000);
        </script>
</body>

字符串操作

<script type="text/javascript">
             var str = '啊信息有限信息有限信息有限';
             // slice(*) 从*开始截取
       // alert(str.length); // 空格占长度
       // alert(str.charAt(2));//找不到的话什么也不显示
       // alert(str.charCodeAt(1));// 返回unicode码
       // alert(String.fromCharCode(21069)); //返回unicode码代表的字符
       // alert(str.charCodeAt());// 0-9 48-57
//        alert(str.charCodeAt());// a-z 97-122
//        alert(str.charCodeAt());// A-Z 65-90
        // alert(str.indexOf('2'));
            var son = '信息';
            var index = str.indexOf(son); // -1 不是就返回-1
            while(index != -1){
                console.log(index);
                // 再找
                index = str.indexOf(son,index+1);
            }
        </script>

字符串截取

          <script type="text/javascript">
            // substring slice
            var str = "方法可从已有的数组中返回选定的元素";
//          console.log(str.substring(2,4));
//          console.log(str.slice(2,4));
            
            // console.log(str.substring(-4));
            console.log(str.slice(-4));
        </script>

字符串截取练习

<style type="text/css">
            #box{
                background: #fc3;
                border: 10px solid #D5D5D5;
                width: 500px;
                padding:10px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <span>
                文章指出,一个国家、一个民族不能没有灵魂。
                文化文艺工作者、哲学社会科学工作者都肩负着启迪思想、陶冶情操、
                温润心灵的重要职责承担着以文化人、以文育人、以文培元的使命。
                文化文艺工作、哲学社会科学工作在党和国家全局工作中居于十分重要的地位,
                在新时代坚持和发展中国特色社会主义中具有十分重要的作用。
            </span>
            <a href="javascript:;">收缩</a>
        </div>
        <script type="text/javascript">
            var oBox=document.getElementById('box');
            var oSpan=oBox.getElementsByTagName('span')[0];
            var text=oSpan.innerHTML;
            var oA=oBox.getElementsByTagName('a')[0];
            var onOff=true;
            oA.onclick=function(){
                if(onOff){
                    oSpan.innerHTML=oSpan.innerHTML.slice(0,38)+'...';
                    oA.innerHTML='展开';
                }else{
                    oSpan.innerHTML=text;
                }
                onOff=!onOff;   
            }
        </script>
    </body>

字符串之split

        <script type="text/javascript">
            // split以...为切点组成数组 join();拼接字符串传进什么值就以什么拼接
            var str='数据库后是否父母不卡就不发就拉倒会';
            var arr=str.split('不');
            console.log(arr);
            console.log(arr.join('不'));
        </script>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容