99乘法表
JSP的简单输出
<%--
Created by IntelliJ IDEA.
User: willorn
Date: 2021/1/22
Time: 13:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>99</title>
<style>
td{
border: 1px solid;
}
</style>
</head>
<body>
<script>
document.write("<table>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(i + "*" + j + "=" + (i * j) + " ");
document.write("</td>");
}
document.write("</tr>");
document.write("<br>")
}
document.write("</table>");
</script>
</body>
</html>
取1~100之间的随机的整数
Math对象
var randnum = Math.random(); //【包含0，不包含1】
100*Math.random(); //[0~100)
Math.floor(100*Math.random()) //[0-99]
1+Math.floor(100*Math.random()) //[1-100]
DOM完成点击替换图片小案例
利用了事件和document.getElementById("")获取对象，之后我们再对对象进行修改操作，添加ifelse逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/pic1.png" id="pic"/>
<script>
var pic = document.getElementById("pic");
var flag = false;
pic.onclick = function () {
if (flag) {
pic.src = "img/pic1.png";
flag = false;
} else {
pic.src = "img/pic2.png";
flag = true;
}
}
</script>
</body>
</html>
自动跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
}
p {
text-align: center;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页……
</p>
<script>
var time = document.getElementById("time");
var num = 5;
function gettime() {
num--;
if (num < 0) {
location.href = "https://baidu.com";
} else {
time.innerHTML = num;
}
}
setInterval(gettime, 1000);
</script>
</body>
</html>
嵌入Java代码遍历List
模拟有这样的一个list，他可以获取后台的数据库，访问得到一个list表，我们可以在JSP中遍历
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
List<String> list = new ArrayList<String>();
list.add("张三");
list.add("李四");
list.add("王五");
list.add("(╰_╯)#");
%>
<table border="1" bgcolor="red">
<% for (String name : list) {
%>
<tr><td>
<% out.println(name); %>
</td></tr>
<% } %>
</table>
</body>
</html>