json，时间对象，时间用图片切换，字符串操作

01.时间对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="datetime"></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();//周几0-6周日到周六
                var hour= myDate.getHours();
                var minute = myDate.getMinutes();
                var sec = myDate.getSeconds();
                var strDate = getTwo(year)+"-"+getTwo(month)+"-"+getTwo(date)+"    "+getTwo(hour)+":"+getTwo(minute)+":"+getTwo(sec);
                document.getElementById('datetime').innerHTML=strDate;
            }
            getTime();
            // 补0的函数
            function getTwo(date){
                if(date<10){
                    date='0'+date;
                }
                return date;
            }
            setInterval(function(){
                getTime();
            },1000)
        </script>
    </body>
</html>

02.图片切换事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="datetime"></p>
        <p id="imgtime">
            <img src="时间对象/0.JPG" >
            <img src="时间对象/0.JPG" >
            <img src="时间对象/colon.JPG" >
            <img src="时间对象/0.JPG" >
            <img src="时间对象/0.JPG" >
            <img src="时间对象/colon.JPG" >
            <img src="时间对象/0.JPG" >
            <img src="时间对象/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('datetime').innerHTML=strDate;
                for(var i = 0;i<strDate.length;i++){
                    var num =strDate.charAt(i);
                    if(i !=2 && i!=5){
                        oImg.getElementsByTagName('img')[i].src='时间对象/'+num+'.JPG';
                    }
                }
            }
            getTime();
            // 补0的函数
            function getTwo(date){
                if(date<10){
                    date='0'+date;
                }
                return date;
            }
            setInterval(function(){
                getTime();
            },1000)
        </script>
    </body>
</html>

03.倒计时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="datetime"></p>
        <script type="text/javascript">
            var timer = null;
            function test(){
                var myDate1 = new Date(2019,3,15,15,38,30);
                var myDate2 = new Date();
                var times = Math.floor((myDate1-myDate2)/1000);
                if(times <= 0){
                    clearInterval(timer);
                    // return;
                }
//          console.log(Math.floor((myDate1-myDate2)/1000)); // 秒时间差
//          console.log(Math.floor((myDate1-myDate2)/1000/60)); // 分钟
//          console.log(Math.floor((myDate1-myDate2)/1000/60/60)); // 小时
//          console.log(Math.floor((myDate1-myDate2)/1000/60/60/24)); // 天
                
//           天：Math.floor(times/86400)
//           时：Math.floor(times%86400/3600)
//           分：Math.floor(times%86400%3600/60)
//           秒：Math.floor(times%60)
                
//          console.log(Math.floor(times/86400));
//          console.log(Math.floor(times%86400/3600));
//          console.log(Math.floor(times%86400%3600/60));   
//          console.log(Math.floor(times%60));
            document.getElementById('datetime').innerHTML = Math.floor(times/86400)+'天'+Math.floor(times%86400/3600)+'小时'+Math.floor(times%86400%3600/60)+'分'+Math.floor(times%60)+'秒';
        }   
        test();
        timer = setInterval(function(){
            test();
        },1000);
        </script>
    </body>
</html>

04.字符串操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var str = 'A前信息台信息技信息术';
//        alert(str.length);空格占长度
//        alert(str.charAt(2));//找不到的话什么也不显示
//        alert(str.charCodeAt());// 返回unicode码
//        alert(String.fromCharCode(22945)); 返回unicode码代表的字符
//        alert(str.charCodeAt());// 0-9 48-57
//        alert(str.charCodeAt());// a-z 97-122
//        alert(str.charCodeAt());// A-Z 65-90
            var son='信息';
            var index = str.indexOf(son);
            while(index !=-1){
                console.log(index);
                index = str.indexOf(son,index+1);
            }
        </script>
    </body>
</html>

05.字符串截取1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <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>
    </body>
</html>

06.字符串截取2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                background: #fc3;
                border: 10px solid #d5d5d5;
                width: 200px;
                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,35)+'...';
                    oA.innerHTML='展开';
                }else{
                    oSpan.innerHTML=text;
                    oA.innerHTML='收缩';
                }
                onOff =!onOff;
            }
        </script>
        
    </body>
</html>

07.字符串之split

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var str = '大1大1大1大1';
            var arr = str.split('1');
            console.log(arr);
            console.log(arr.join(''));
        </script>
    </body>
</html>

08.字符串的查找

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 500px;
                padding: 10px;
                background: #FFCC33;
                border: 10px solid #d5d5d5;
            }
            .bg{
                background: #0067c3;
                
            }
        </style>
    </head>
    <body>
        <p>
            <input type="text">
            <button type="button">查找</button>
        </p>
         <p>
            <input type="text">
            <button type="button">替换</button>
            <button type="button">确定</button>
        </p>
        <div id="box">
            文章指出，一个国家、一个民族不能没有灵魂。
            文化文艺工作者、哲学社会科学工作者都肩负着启迪思想、
            陶冶情操、温润心灵的重要职责承担着以文化人、
            以文育人、以文培元的使命。文化文艺工作、
            哲学社会科学工作在党和国家全局工作中居于十分重要的地位，
            在新时代坚持和发展中国特色社会主义中具有十分重要的作用。
        </div>
       
        
        <script type="text/javascript">
            var oText = document.getElementsByTagName('input')[0];
            var oText1 = document.getElementsByTagName('input')[1];
            var oBtn = document.getElementsByTagName('button')[0];
            var oBtn1 = document.getElementsByTagName('button')[1];
            var oBtn2 = document.getElementsByTagName('button')[2];
            var oBox = document.getElementsByTagName('div')[0];
            var text = oBox.innerHTML;
            oBtn.onclick=function(){
                oBox.innerHTML=text;
                var arr = oBox.innerHTML.split(oText.value);
                oBox.innerHTML= arr.join('<span class="bg">'+oText.value+'</span>');
            }
            oBtn1.onclick=function(){
                var aSpan =document.getElementsByTagName('span');
                for(var i =0;i<aSpan.length;i++){
                    aSpan[i].innerHTML=oText1.value;
                }
            }
            oBtn2.onclick=function(){
                var aSpan =document.getElementsByTagName('span');
                for(var i =0;i<aSpan.length;i++){
                    aSpan[i].style.background='#FFCC33';
                }
            }
        </script>
    </body>
</html>

09.json

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // json对象 类似map集合
            var json = {
                "name":"姜政",
                "age":18,
                "gender":"男"
            };
            console.log(json['name']);
            console.log(json['age']);
            console.log(json['gender']);
            for(attr in json ){
                console.log(attr+'    '+json[attr]);
            }
            var arr =[1,2,3,4];
            for(i in arr){
                console.log(arr[i]);
            }
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容