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="按钮" />

<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=n+'.jpg';

            };

            //上一张按钮点击事件

            prev.onclick= function () {

                n--;

                if(n<1){

                    n=1;

                }

            }

        };

    </script>

</head>

<body>

<input type="button" id="prev" value="上一张" />

<input type="button" id="text" value="下一张" />

<img src="1.jpg"  id="pic" alt="" />

</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="提交" />

<div id="box"></div>

</body>

</html>

js字符串和控制语句的更多相关文章

  1. JS字符串替换函数:Replace(“字符串1″, “字符串2″)，

    JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...

  2. js 字符串转换成数字的三种方法

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...

  3. 探讨js字符串数组拼接的性能问题

    这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍 我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制 ...

  4. 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里

    JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...

  5. js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果

    使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...

  6. js动态获取当前系统时间+js字符串转换为date日期对象

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 从js的repeat方法谈js字符串与数组的扩展方法

    js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...

  8. js字符串长度计算(一个汉字==两个字符)和字符串截取

    js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...

  9. js字符串 数字 的转换

    js 字符串转化成数字 的 三种方法主要有 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数 ...

随机推荐

  1. 好习惯: 用controller as 语法和$inject数组注入

    angular好习惯1: 用controller as 语法和$inject数组注入 1) 像普通的JS类一样实现controller,摆脱$scope 2) 用.$inject数组注入相关模块,便于 ...

  2. 用Python进行人脸识别

    本文的模型使用了C++工具箱 dlib 基于深度学习的最新人脸识别方法,基于户外脸部数据测试库Labeled Faces in the Wild 的基准水平来说,达到了99.38%的准确率. dlib ...

  3. 【LeetCode】2. Add Two Numbers 两数相加

    给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...

  4. [SQL Server]无法创建 SSIS 运行时对象,请验证 DTS.dll 是否可用及是否已注册

    很大可能是SQL Server Management Studio(SSMS)版本与当前操作系统不兼容造成的,与数据库本身没有关系,这种情况基本无解,不过可以使用其他机器连本机数据库导入导出数据. 今 ...

  5. BZOJ 3473: 字符串 （广义后缀自动机）

    /* 广义后缀自动机, 每次加入维护 该right集合的set, 然后可以更新所有的parent,最终能够出现在k个串中right集合也就是set大小大于等于k的部分 这样的话就给了我们要跳的节点加了 ...

  6. python随机数random

    1.random.random()方法用于生成一个0到1的随机浮点数:0<=n<1.0 2.random.uniform(a,b):用于生成一个指定范围内的随机浮点数,两格参数中,其中一个 ...

  7. ERROR: iterator not incrementable || iterator not decrementable

    这个错误提示:迭代器不可以增加 exmaple: vector<int> tVecInt; vector<int>::reverse_iterator iterInt = tV ...

  8. 【译】在Flask中使用Celery

    为了在后台运行任务,我们可以使用线程(或者进程). 使用线程(或者进程)的好处是保持处理逻辑简洁.但是,在需要可扩展的生产环境中,我们也可以考虑使用Celery代替线程.   Celery是什么? C ...

  9. tkinter menu

    python] view plain copy '''''Tkinter教程之Menu篇''' '''''1.创建一个简单的Menu''' # 添加菜单hello和quit,将hello菜单与hell ...

  10. Java base64 图片编码转换

    package com.test; import org.junit.Test; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encode ...