首页 > 代码库 > js字符串和控制语句

js字符串和控制语句

1.js的字符串

* 字符串
* 字符串是js数据类型中的一种
*字符串拼接:+,加号有两层含义
* 1、数学中的加法运算;
* 2、字符串连接,当加号的任意一边是一个字符串,那就是字符串连接的意思;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        var str=‘kaiven‘;
        var str2="字";
        console.log(str);
        console.log(str2);

        console.log(1+10);  //11
        console.log(‘a‘+10); //  ‘a10‘
        console.log(‘1‘+1);

        var str3=1;
        console.log(str3+‘str3‘);  // ‘1str3‘

        var str4=2;
        console.log(str4+str4);
    </script>
</body>
</html>

 

2.js的流程控制

* 需求
* 点击的时候,让box在显示和隐藏之间切换
* 分析:
* 1、拿到按钮、box
* 2、给按钮添加点击事件
* 根据box的display属性
* 如果box是显示的,那让它隐藏
* 如果是影藏的,那让它显示
*
* style 它操作的是行间样式,最好不要使用行间样式,否则会让html特别臃肿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 10px;
            height: 100px;
            border: 1px solid #ff0000;
            display: -none;
        }
    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById(‘btn‘);
            var box=document.getElementById(‘box‘);

            btn.onclick=function(){
                alert(box.style.display==‘block‘);  //false
                if(box.style.display==‘block‘){
                    //这个条件成立,说明box是显示的,让它隐藏
                    box.style.display=‘none‘;

                }else{
                    //代码如果走这里,说明现在box是隐藏的,让显示
                    box.style.display=‘block‘;
                }
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="http://www.mamicode.com/按钮" />
<div id="box"></div>
</body>
</html>

 

 

* 需求:点击下一张按钮,让图片切换成下一张图
* 点击上一张,让图片切换成上一张图
* 分析:
* 1、获取到下一张按钮
* 2、给按钮添加点击事件
* a、用属性操作的方法去修改图片的src;
* b、把数字存到一个变量里,点击下一张,就让这个变量加1.用字符串拼接的方法去修改图片的src属性;
*
* 累加
* n=n+1
* n+=1;
* n++;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            display: block;
        }
    </style>
    <script>
        window.onload= function () {
            var next=document.getElementById(‘next‘);
            var prev=document.getElementById(‘prev‘);
            var pic=document.getElementById("pic");
            var n=1;
            //下一张按钮点击事件
            next.onclick=function(){
                //点击一下n加1
                //n=n+1;
                //n+=1;
                n++;
                console.log(n);
                if(n>4){
                    n=4;    //总共4张图片
                }
                pic.src=http://www.mamicode.com/n+‘.jpg‘;"button" id="prev" value="http://www.mamicode.com/上一张" />
<input type="button" id="text" value="http://www.mamicode.com/下一张" />
<img src="http://www.mamicode.com/1.jpg"  id="pic"  />
</body>
</html>

 

下面的例介绍文档处理

* 需求:点击按钮,把输入框里的内容显示到box里
*
* 分析:
* 1、分析到按钮、文本框、box
* 2、给按钮添加点击事件
* a、获取用户输入的内容(text和vlue)
* b、把获取到的内容显示到box里面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid #ff0000;
        }
    </style>
    <script>
        window.onload= function () {
            var text=document.getElementById(‘text‘);
            var btn=document.getElementById(‘btn‘);
            var box=document.getElementById(‘box‘);

            btn.onclick= function () {
                var val=text.value; //用户输入的内容
                var newText=‘<p>‘+val+‘</p>‘;
                console.log(val);

                 //innerHTML
                //字符串的拼接
                //原来的内容  box.innerHTML
                //新输入的内容   ‘<p>‘+val+‘</p>‘

                /*
                *
                * innerHTML
                *   设置内容
                *   获取内容(老内容)
                *
                * */
                //box.innerHTML=box.innerHTML+newText;    //新内容在下面显示
                box.innerHTML=newText+box.innerHTML;    //新内容在上面显示
            }
        }
    </script>
</head>
<body>
<input type="text" id="text" value="" />
<input type="button" id="btn" value="http://www.mamicode.com/提交" />
<div id="box"></div>
</body>
</html>

 

js字符串和控制语句