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

js字符串和控制语句

2024-09-10 22:37:21   220人阅读

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字符串和控制语句


联系
我们