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="按钮" />
<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字符串和控制语句的更多相关文章
- JS字符串替换函数:Replace(“字符串1″, “字符串2″)，
JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...
- js 字符串转换成数字的三种方法
在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...
- 探讨js字符串数组拼接的性能问题
这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍 我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制 ...
- 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里
JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...
- js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果
使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...
- js动态获取当前系统时间+js字符串转换为date日期对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 从js的repeat方法谈js字符串与数组的扩展方法
js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...
- js字符串长度计算(一个汉字==两个字符)和字符串截取
js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...
- js字符串 数字 的转换
js 字符串转化成数字 的 三种方法主要有 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数 ...
随机推荐
- Java关键字final、static使用总结（转）
原文链接:Java关键字final, static一些要点 1. final final类不能被继承,没有子类,final类中的方法默认是final的 final方法不能被子类的方法复盖,但可以被 ...
- spark使用hadoop native库
默认情况下,hadoop官方发布的二进制包是不包含native库的,native库是用C++实现的,用于进行一些CPU密集型计算,如压缩.比如apache kylin在进行预计算时为了减少预计算的数据 ...
- Linux Kafka源码环境搭建
本文主要讲述的是如何搭建Kafka的源码环境,主要针对的Linux操作系统下IntelliJ IDEA编译器,其余操作系统或者IDE可以类推. 1.安装和配置JDK确认JDK版本至少为1.7,最好是1 ...
- concurrent.futures进线程池和协程
concurrent.futures 异步执行进程线程池的模块,一个抽象类,定义submit,map,shutdown方法 from concurrent.futures import Process ...
- flask session,蓝图,装饰器,路由和对象配置
1.Flask 中的路由 *endpoint - url_for 反向地址 *endpoint 默认是视图函数名 *methods 指定视图函数的请求方式,默认GET defaults={& ...
- is和==的区别
is 比较的是内存地址 == 比较的是内容 当两个变量指向同一个对象的时候. is是True, ==也是True
- Access 分页
access分页 pageSize 每页显示多少条数据 pageNumber 页数 从客户端传来 pages) SQL语句 select top pageSize * from 表名 where id ...
- python中使用tabula爬取pdf数据并导出表格
Tabula是专门用来提取PDF表格数据的,同时支持PDF导出CSV.Excel格式. 首先安装tabula-py: tabula-py依赖库包括Java.pandas.numpy所以需要保证运行环境 ...
- StanFord ML 笔记 第二部分
本章内容: 1.逻辑分类与回归 sigmoid函数概率证明---->>>回归 2.感知机的学习策略 3.牛顿法优化 4.Hessian矩阵 牛顿法优化求解: 这个我就不记录了,看到一 ...
- [Lua]string与中文
参考链接: https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81/8446880?fr=aladdin#7 http:// ...