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{
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{
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>