前端之javascript2

2020-12-08 13:30

阅读：618

标签：document one 文档对象模型取整操作执行函数 image indexof ++

js组成和标签获取元素

javascript组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型操作html和css的方法(比如通过id或者标签来获取元素并赋予颜色之类的样式)
3、BOM 浏览器对象模型操作浏览器的一些方法(比如控制浏览器弹出窗口或者控制台打印数据)

标签获取元素

获取元素的第二种方法
document.getElementsByTagName(‘‘),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。

关于性能，如果在循环时，有一个固定的值每次都要去查询一次，应该将那个固定的值先在外面定义好；
标签获取元素示例-各行换色

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>通过标签获取元素title>
    script type="text/javascript">
        window.onload = function () {
            // 通过标签名称获取li元素，生成一个选择集，赋值给aLi
            var aLi = document.getElementsByTagName(‘li‘);
            // 读取选择集内元素的个数
            //alert(aLi.length);  // 弹出13

            var iLen = aLi.length;
            //给一个li设置背景色
            //aLi[0].style.backgroundColor = ‘gold‘;

            // 不能给选择集设置样式属性
            //aLi.style.backgroundColor = ‘gold‘;

            /*
            同时给所有的li加背景色
            for(var i=0;i*/
            
            var oUl = document.getElementById(‘list1‘);
            var aLi2 = oUl.getElementsByTagName(‘li‘);

            var iLen2 = aLi2.length;
            for (var i = 0; i  iLen2; i++) {
                if (i % 2 == 0) {
                    aLi2[i].style.backgroundColor = ‘gold‘;
                }
            }
        }
    script>
head>
body>
ul id="list1">
    li>1li>
    li>2li>
    li>3li>
    li>4li>
    li>5li>
    li>6li>
    li>7li>
    li>8li>
ul>

ul id="list2">
    li>1li>
    li>2li>
    li>3li>
    li>4li>
    li>5li>
ul>
body>
html>

标签获取元素示例-各行换色

字符串操作方法

js操作数据的能力还是没有后端强，所以一般是由后端处理好数据后，再传给前端，但前端有时候也会需要自己处理数据；

字符串处理方法

1、字符串合并操作：“ + ”
2、parseInt() 将数字字符串转化为整数
3、parseFloat() 将数字字符串转化为小数
4、split() 把一个字符串分隔成字符串组成的数组
5、charAt() 获取字符串中的某一个字符
6、indexOf() 查找字符串是否含有某字符
7、substring() 截取字符串用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写

字符串反转

var str = ‘asdfj12jlsdkf098‘;
var str2 = str.split(‘‘).reverse().join(‘‘);

alert(str2);

字符串操作方法实例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>字符串的处理方法title>
    script type="text/javascript">
        var iNum01 = 12;
        var sNum02 = ‘24‘;
        var sTr = ‘abc‘;

        // 数字和字符串相加等同于字符串拼接
        //alert(iNum01+sNum02);  // 弹出 1224
        //alert(sNum02+sTr);  // 弹出 24abc
        
        var sTr02 = ‘12.35‘;
        //将字符串的小数转化成整数
        //alert(parseInt(sTr02));  // 弹出12
        //将字符串的小数转化成小数
        //alert(parseFloat(sTr02));
        
        var sTr03 = ‘2017-4-22‘;
        var aRr = sTr03.split("-");
        //alert(aRr); // 弹出[‘2017‘,‘4‘,‘22‘];
        
        var aRr2 = sTr03.split("");
        //alert(aRr2); // 弹出[‘2‘,‘0‘,‘1‘,‘7‘,‘-‘,‘4‘,‘-‘,‘2‘,‘2‘]

        var sTr04 = ‘#div‘;
        var sTr05 = sTr04.charAt(0);
        // alert(sTr05); 弹出 #

        var sTr06 = ‘abcdef microsoft asldjfl‘;
        var iNum03 = sTr06.indexOf(‘microsoft‘);
        var iNum04 = sTr06.indexOf(‘yahei‘);
        //alert(iNum03);  // 存在 弹出字符串对应的索引值 7
        //alert(iNum04);  // 不存在  弹出 -1
        
        var sTr07 = ‘abcdef123456edfg‘;
        var sTr08 = sTr07.substring(6, 12);
        var sTr09 = sTr04.substring(1);
        //alert(sTr08);
        //alert(sTr09);

        var sTr10 = ‘abcdef‘;
        var sTr11 = sTr10.toUpperCase();
        alert(sTr11);

        var sTr12 = ‘1234j3290850ljdlsjlfajdlkskdfj‘;
        var sTr13 = sTr12.split(‘‘).reverse().join(‘‘);
        alert(sTr13);
    script>
head>
body>

body>
html>

字符串操作方法实例

定时器

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert(‘ok!‘);
}

定时器简单实例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    script type="text/javascript">
        function myalert(){
            alert(‘hello world!‘);
        }
        
        // 只执行一次的定时器,第一个参数是函数名，或者是匿名函数，第二个参数是时间，单位是毫秒，不写单位
        //var timer01 = setTimeout(myalert,2000);
        // 关闭只执行一次的定时器
        //clearTimeout(timer01);
        
        // 反复执行的定时器
        //var timer02 = setInterval(myalert,1000); 改成下面匿名函数的写法：
        var timer02 = setInterval(function(){
            alert(‘hello world!‘);
        },1000)
        //关闭反复执行的定时器
        //clearInterval(timer02);
    script>
head>
body>
    
body>
html>

定时器简单实例

定时器盒子移动实例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById(‘div1‘);
            var iLeft = 0;
            /*
            var timer = setInterval(moving,30);
            function moving(){
                iLeft += 3;
                oDiv.style.left = iLeft + ‘px‘;
            }
            */
            var timer = setInterval(function(){
                iLeft += 3;
                oDiv.style.left = iLeft + ‘px‘;
                if(iLeft>700)
                {
                    clearInterval(timer);
                }
            },30);
        }
    script>
    style type="text/css">        
        .box{
            width:200px;
            height:200px;
            background-color:gold;
            position:absolute;
            left:0;
            top:100px;
        }
    style>
head>
body>
    div id="div1" class="box">div>
body>
html>

定时器盒子移动实例

盒子往复运动动画示例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);
            var iLeft = 0;
            var iSpeed = 3;
            /*
            var timer = setInterval(moving,30);
            function moving(){
                iLeft += 3;
                oDiv.style.left = iLeft + ‘px‘;
            }
            */
            var timer = setInterval(function () {
                iLeft += iSpeed;
                oDiv.style.left = iLeft + ‘px‘;

                if (iLeft > 700) {
                    iSpeed = -3;
                }
                if (iLeft  0) {
                    iSpeed = 3;
                }
            }, 20);
        }
    script>
    style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;
            left: 0;
            top: 100px;
        }
    style>
head>
body>
div id="div1" class="box">div>
body>
html>

盒子往复运动动画示例

无缝滚动示例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>无缝滚动title>
    style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .list_con {
            width: 1000px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto 0;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        .list_con ul {
            list-style: none;
            width: 2000px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .list_con li {
            width: 180px;
            height: 180px;
            float: left;
            margin: 10px;
        }

        .btns_con {
            width: 1000px;
            height: 30px;
            margin: 50px auto 0;
            position: relative;
        }

        .left, .right {
            width: 30px;
            height: 30px;
            background-color: gold;
            position: absolute;
            left: -40px;
            top: 124px;
            font-size: 30px;
            line-height: 30px;
            color: #000;
            font-family: ‘Arial‘;
            text-align: center;
            cursor: pointer;
            border-radius: 15px;
            opacity: 0.5;
        }

        .right {
            left: 1010px;
            top: 124px;
        }
    style>
    script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById(‘slide‘);
            var oBtn01 = document.getElementById(‘btn01‘);
            var oBtn02 = document.getElementById(‘btn02‘);
            
            //通过标签获取元素，获取的是选择集，加上下标才能获取到元素            
            var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
            var iLeft = 0;
            var iSpeed = -2;
            var iNowspeed = 0;

            //将ul里面的内容复制一份，整个ul里面就包含了10个li
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

            function moving() {
                iLeft += iSpeed;

                // 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
                if (iLeft  -1000) {
                    iLeft = 0;
                }
                //当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
                if (iLeft > 0) {
                    iLeft = -1000;
                }
                oUl.style.left = iLeft + ‘px‘;
            }
            var timer = setInterval(moving, 30);
            
            oBtn01.onclick = function () {
                iSpeed = -2;
            };
            oBtn02.onclick = function () {
                iSpeed = 2;
            };
            // 当鼠标移入的时候
            oDiv.onmouseover = function () {
                iNowspeed = iSpeed;
                iSpeed = 0;
            };
            // 当鼠标移出的时候
            oDiv.onmouseout = function () {
                iSpeed = iNowspeed;
            }
        }
    script>
head>
body>
div class="btns_con">
    div class="left" id="btn01"><div>
    div class="right" id="btn02">>div>
div>
div class="list_con" id="slide">
    ul>
        li>a href="">img src="images/goods001.jpg" alt="商品图片">a>li>
        li>a href="">img src="images/goods002.jpg" alt="商品图片">a>li>
        li>a href="">img src="images/goods003.jpg" alt="商品图片">a>li>
        li>a href="">img src="images/goods004.jpg" alt="商品图片">a>li>
        li>a href="">img src="images/goods005.jpg" alt="商品图片">a>li>
    ul>
div>
body>
html>

无缝滚动示例

定时器制作时钟示例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);

            function fnTimego() {
                var sNow = new Date();
                // 获取年份
                var iYear = sNow.getFullYear();
                // 获取月份，月份是从0到11，0表示一月，11表示十二月
                var iMonth = sNow.getMonth() + 1;
                var iDate = sNow.getDate();
                // 星期是从0到6,0表示星期天
                var iWeek = sNow.getDay();
                var iHour = sNow.getHours();
                var iMinute = sNow.getMinutes();
                var iSecond = sNow.getSeconds();

                var sTr = ‘当前时间是：‘ + iYear + ‘年‘ + iMonth + ‘月‘ + iDate + ‘日 ‘ + fnToweek(iWeek) + ‘ ‘
                    + fnTodou(iHour) + ‘:‘ + fnTodou(iMinute) + ‘:‘ + fnTodou(iSecond);
                oDiv.innerHTML = sTr;
            }
            // 刚开始调用一次，解决刚开始1秒钟空白的问题
            fnTimego();
            setInterval(fnTimego, 1000);
            function fnToweek(n) {
                if (n == 0) {
                    return ‘星期日‘;
                } else if (n == 1) {
                    return ‘星期一‘;
                } else if (n == 2) {
                    return ‘星期二‘;
                } else if (n == 3) {
                    return ‘星期三‘;
                } else if (n == 4) {
                    return ‘星期四‘;
                } else if (n == 5) {
                    return ‘星期五‘;
                } else {
                    return ‘星期六‘;
                }
            }

            function fnTodou(n) {
                if (n  10) {
                    return ‘0‘ + n;
                } else {
                    return n;
                }
            }
        }
    script>
    style type="text/css">
        div {
            text-align: center;
            font-size: 30px;
            color: red;
        }
    style>
head>
body>
div id="div1">div>
body>
html>

定时器制作时钟示例

定时器制作倒计时示例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);

            function fnTimeleft() {
                //实际开发中需要读取后台的时间，可以通过ajax来读取
                var sNow = new Date();
                // 未来时间：4月30日晚24点
                var sFuture = new Date(2017, 3, 30, 24, 0, 0);

                //计算还有多少秒
                var sLeft = parseInt((sFuture - sNow) / 1000);
                //计算还剩多少天
                var iDays = parseInt(sLeft / 86400);
                // 计算还剩多少小时
                var iHours = parseInt((sLeft % 86400) / 3600);
                // 计算还剩多少分
                var iMinutes = parseInt(((sLeft % 86400) % 3600) / 60);
                // 计算还剩多少秒
                var iSeconds = sLeft % 60;

                var sTr = ‘距离5月1日还剩：‘ + iDays + ‘天‘ + fnTodou(iHours) + ‘时‘ + fnTodou(iMinutes) + ‘分‘ + fnTodou(iSeconds) + ‘秒‘;
                oDiv.innerHTML = sTr;
            }

            fnTimeleft();
            setInterval(fnTimeleft, 1000);
            
            function fnTodou(n) {
                if (n  10) {
                    return ‘0‘ + n;
                } else {
                    return n;
                }
            }
        }

上一篇：Essential C++ 3.1 节的代码练习——哨兵方式

下一篇：PYTHON学习0012：深浅COPY----2019-6-8

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：前端之javascript2
文章链接：http://soscw.com/essay/23502.html

亲，登录后才可以留言！

前端之javascript2

js组成和标签获取元素

javascript组成

标签获取元素

字符串操作方法

定时器

评论

热门文章

推荐文章

最新文章

置顶文章