# 第八次课:JS
## 一、综合案例
用到循环和判断
**案例:用js制作表格,实现隔行变色**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var str_head = '<table width="200px" height="1150px" rules="yes" cellspacing="0">'
var str_end = '</table>'
var str_content = ''
for(var n=1; n<=100; n++)
{
if(n%2 == 1)
{
str_content += '<tr bgcolor="pink"><td>1-1</td><td>1-2</td></tr>'
}
else
{
str_content += '<tr bgcolor="silver"><td>1-1</td><td>1-2</td></tr>'
}
}
var str = str_head + str_content + str_end
document.write(str)
</script>
</head>
<body>
</body>
</html>
```
**故障案例:table的表格边框在火狐无法正常显示**
- 解决方式1:不用table标签做边框,用div结合position进行页面布局
- 解决方式2:还是用table,同时结合css进行设置边
## 二、js的内置对象
### 1、类别
- string对象
- date对象
- number对象
- math对象
### 2、string对象
- 处理各种字符串操作
**方法:**
- length:获取字符串长度【属性】
- toLowerCase( ):将字符串中的全部的字母转换成小写【方法】
- toUpperCase( ):将字符串中的全部的字母转换成大写【方法】
- charAt( ):获得指定位置上的字符,位置编号是从0开,也就是0表示第一个字符,1表示第二个字符....
- indexOf( ):查找字符串是否包含指定的内容,返回结果是指定的内容的位置编号
**案例1:让用户输入姓名**
- 如果用户输入了,就显示用户的名字
- 如果用户没有输入,就显示用户没有输入信息
**案例2:让用户选择输入Y|N,要求无论用户输入的是大写还是小写,都能正常判断**
**案例3:让用户进行输入,判断用户是否输入了内容**
- **如果没有输入任何东西,提示你需要输入**
- **如果输入了,判断第二个字符是否是字母c**
**案例4:让用户输入几个字符,将用户输入第四个字符转换成大写,然后将全部的内容显示出来**
- 例如用户输入:adsfasd,要求输出结果是adsFasd
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 第一步:让用户输入字符
var cho = window.prompt("请输入几个字符:")
// 第二步:计算用户输入的字符个数是多少
var num = cho.length
// 第三步:对用户输入的字符串进行循环
for(var m=0; m<num; m++)
{
// 将字符串中的第m个字符提取出来赋值给str
var str = cho[m]
// 在循环中需要判断是否为第四个字符,如果是,就将这个字符转换为大写
if(m==3){
str = str.toUpperCase()
}
document.write(str)
}
</script>
</head>
<body>
</body>
</html>
```
**案例5:判断用户输入的邮箱是否为合法**
**补充案例【不做要求】**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script type="text/javascript">
window.onload = function (){ // 定义一个函数
var btnobj = document.getElementById("button") // 通过id是button的id,找到按钮
btnobj.onclick = function (){ // 给找到的按钮绑定一个点击事件
var divobj = document.getElementById("box") // 找到div
divobj.style.backgroundColor = "black" // 为div设置背景色
}
}
</script>
<body>
<input type="button" value="修改颜色" id="button">
<div class=box id=box></div>
</body>
</html>
```
第八次课
最新推荐文章于 2022-11-29 19:45:44 发布