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. MapReduce源码刨析

    MapReduce编程刨析: Map map函数是对一些独立元素组成的概念列表(如单词计数中每行数据形成的列表)的每一个元素进行指定的操作(如把每行数据拆分成不同单词,并把每个单词计数为1),用户可以 ...

  2. 在windows server 2012/2016上，任务管理器性能页面增加磁盘监控的办法

    从windows server 2012开始,微软修改了任务管理器的显示方式,图像化看起来更直观了,但是可惜的是,默认情况下,2012和2016均只显示CPU/内存/网络三个资源监视,没有重要的磁盘, ...

  3. 禁用SSL v2.0、SSL v3.0协议

    1.禁用SSL v2.0.SSL v3.0协议,禁用低强度加密密钥.使用TLS 1 TLSv1.1 TLSv1.2版本.2.禁用SSLv2参考修补方法如下:查看本机sslv3加密列表:openssl ...

  4. 【Jmeter自学】badboy使用（三）

    ==================================================================================================== ...

  5. 剑指Offer(二)：替换空格

    说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...

  6. mysql之pymsql的使用

    # -*- coding:utf-8 -*- import pymysql user = input('请输入用户名:') pwd = input('请输入密码:') # 1.连接 conn = py ...

  7. [Unity插件]Lua行为树(十一)：组合节点Parallel

    Parallel节点类似Sequence节点,不同在于Parallel会每帧执行所有的节点.当所有节点返回成功时返回成功,当其中一个节点返回失败时,返回失败并且结束所有的子节点运行. 例如说,给Seq ...

  8. 关于thinkphp中post提交空白的思考

    关于thinkphp中post提交空白的思考 首选检查 目标路径是否存在 如果目标URL不存在 那肯定是空 如果提交的路径存储  TP这种完善的系统肯定会提示 各种报错了

  9. 阿里云 putty链接服务器出现 server refused our key

    阿里云 putty链接服务器出现 server refused our key 创建了密钥对绑定实例,puttygen生成ppk,putty配置参数,连接,一步一步来的,结果出现 server ref ...

  10. oozie 工作流调试及报错

    1.  oozie 调用sql文件的workflow 错误汇总: 1)hive2server密码错误.(有时设置可以无密码,有时需要登陆密码,有时是单独的hive2server密码) Connecti ...