# 第八次课：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 发布
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
