Java教程

【JavaWeb】JavaScript例程回顾

本文主要是介绍【JavaWeb】JavaScript例程回顾，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！


例程回顾

  • 99乘法表
  • 取1~100之间的随机的整数
  • DOM完成点击替换图片小案例
  • 自动跳转页面
  • 嵌入Java代码遍历List


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(""
);    for (var i = 1; i <= 9; i++) {        document.write("");        for (var j = 1; j <= i; j++) {            document.write("");            document.write(i + "*" + j + "=" + (i * j) + "&nbsp");            document.write("");        }        document.write("");        document.write("
")    }    document.write("");</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>

               

这篇关于【JavaWeb】JavaScript例程回顾的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航