整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
你可以弹出警告框来显示数据：
实例
nbsp;html>
我的第一个页面
我的第一个段落。
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
实例
nbsp;html>
我的第一个 Web 页面
"demo">我的第一个段落
以上 JavaScript 语句（在 标签中）可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的JavaScript 代码。
在本教程中
在大多数情况下，在本教程中，我们将使用上面描述的方法来输出：
上面的例子直接把 id=”demo” 的
元素写到 HTML 文档输出中：
写到 HTML 文档
出于测试目的，您可以将JavaScript直接写在HTML 文档中：
实例
nbsp;html>
我的第一个 Web 页面
我的第一个段落。
Fri Apr 22 2022 16:20:12 GMT+0800 (中国标准时间)
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
实例
nbsp;html>
我的第一个 Web 页面
我的第一个段落。
"MYFUNCTION()">点我
写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。
nbsp;html>
我的第一个 Web 页面
实例 console 截图：
您知道吗?
程序中调试是测试，查找及减少bug(错误)的过程。
ndex.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" errorPage="" %>
<html>
<head>
<title>加密的验证码</title>
<link rel="stylesheet" href="css/style.css" />
<script language="javascript">
function myReload(){
//document.createCheckCode.src="PictureCheckCode";
document.getElementById("createCheckCode").src=document.getElementById("createCheckCode").src+"?nocache="+new Date().getTime();
}
</script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4F6D92',endColorStr='#ACCBE7',gradientType='0');">
<table width="100%" height="451" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><table width="509" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="142"><img src="images/login_top.jpg" width="509" height="142"></td>
</tr>
<tr>
<td height="159" valign="top" background="images/login_bottom.jpg">
<table width="350" border="0" cellpadding="0" cellspacing="0" background="KCM/login.gif">
<form name="form1" method="post" action="check.jsp" onSubmit="return check();">
<tr>
<td width="84"> </td>
<td width="57" height="28">用户名：</td>
<td colspan="2"><input name="username" type="text" size="29"></td></tr>
<tr>
<td> </td>
<td height="28">密 码：</td>
<td colspan="2"><input name="password" type="password" size="29"></td></tr>
<tr>
<td height="24" align="center"> </td>
<td height="28" align="center">验证码：</td>
<td width="33" height="24" align="left">
<input name="checkCode" title="验证码区分大小写" type="text" size="4" maxlength="4"> </td>
<td width="176" align="left">
<img src="PictureCheckCode" id="createCheckCode" style="border:#999999 solid 1px">
<a href="#" onClick="myReload()">看不清?换一个</a>
</td>
</tr>
<tr>
<td height="37" colspan="4" align="center"><input name="submit" type="submit" class="btn_bg_manageLogin" value="登 录">
<input name="reset" type="reset" class="btn_bg_manageLogin" value="取 消">
</td>
</tr>
</form>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function check(){
if(form1.username.value==""){
alert("请输入用户名！");
form1.username.focus();
return false;
}
if(form1.password.value==""){
alert("请输入密码！");
form1.password.focus();
return false;
}
if(form1.checkCode.value==""){
alert("请输入验证码！");
form1.checkCode.focus();
return false;
}
}
</script>check.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="encode" class="com.demo.Encode" scope="request"/>
<%
String checkCode = request.getParameter("checkCode").toString();
checkCode = encode.encodeByMD5(checkCode); //进行MD5加密
if("".equals(request.getParameter("username")) || "".equals(request.getParameter("password"))){
out.println("<script>alert('请输入用户名或密码！');window.location.href='index.jsp';</script>");
}
else{
if(!("mr".equals(request.getParameter("username")) && "mrsoft".equals(request.getParameter("password")))){
out.println("<script>alert('您输入的用户名或密码不正确！');window.location.href='index.jsp';</script>");
}
}
if ("".equals(checkCode) || checkCode == null) {
out.println("<script>alert('请输入验证码！');window.location.href='index.jsp';</script>");
}
else {
if (!checkCode.equals(session.getAttribute("randCheckCode"))) {
out.println("<script>alert('您输入的验证码不正确！');window.location.href='index.jsp';</script>");
}
}
%>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="778" height="275" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="115" colspan="2">
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="784" height="115" align="center" valign="top">
<img src="images/logo.jpg" width="778" height="115">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="190"><a href="#" onClick="show_div('menu1')" >
<img src="images/left_top.GIF" width="186" height="33"></a>
<table width="186" height="331" border="0" cellpadding="0" cellspacing="0" class="tableBorder_bold">
<tr>
<td height="323" align="center" valign="top">
<!--基础信息管理-->
<a href="#">
<img name="Imgmenu1" border="0"
src="images/menu_1.JPG" align="ABSMIDDLE" width="165" height="26"></a>
<div id="menu1">
<table width="165" border="0" cellpadding="0" cellspacing="0" class="tableBorder">
<tr><td width="18%" height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td width="82%"><a href="#">客户信息管理</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">商品信息管理</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">供应商信息管理</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">商品信息查询</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">客户信息查询</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">供应商信息查询</a></td>
</tr>
</table>
</div>
<!--库存管理-->
<a href="#" >
<img name="Imgmenu3" align="ABSMIDDLE"
src="images/menu_3.JPG" border="0" width="165" height="28"></a><br>
<!--销售管理-->
<a href="#">
<img name="Imgmenu4" align="ABSMIDDLE"
src="images/menu_4.JPG" border="0" width="165" height="28"></a><br>
<a href="#">
<img name="Imgmenu5" align="ABSMIDDLE"
src="images/menu_5.JPG" border="0" width="165" height="28"></a><br>
<a href="#">
<img name="Imgmenu6" align="ABSMIDDLE"
src="images/menu_6.JPG" border="0" width="165" height="28"></a><br>
<a href="index.jsp" >
<img name="Imgmenu7" align="ABSMIDDLE"
src="images/menu_7.JPG" border="0" width="165" height="28"></a><br>
</td>
</tr>
</table></td>
<td width="588"> </td>
</tr>
</table>
</body>
</html>
style.css
td {
font-size: 9pt;
color: #000000;
}
a:hover {
font-size: 9pt;
color: #FF6600;
}
a {
font-size: 9pt;
text-decoration: none;
color: #676767;
noline:expression(this.onfocus=this.blur);
}
img{
border:0;
}
.img1{
border:1px;
}
.blue {
font-size: 9pt;
color: #034683;
}
.bgcolor {
font-size: 9pt;
color: #1980DB;
}
.btn_grey {
font-family:"宋体";
font-size: 9pt;
color: #333333;
background-color: #eeeeee;
cursor: hand;
padding:1px;
height:19px;
border-top: 1px solid #FFFFFF;
border-right:1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #FFFFFF;
}
.btn_bg_manageLogin{
background-image:url(../images/login_btn_bg.gif);
border:#436E9B solid 1px;
width:51px;
height:20px;
padding:4px;
color:#000000;
outline-color:#FFFFFF;
}
input{
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.word_grey{
color:#CFEAFD;
}
.word_deepgrey{
color:#505050;
}
.word_orange{
color:#FF6600;
}
.word_blue{
color:#123F73;
}
.word_white{
color:#FFFFFF;
}
.word_gray{
color:#dddddd;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.textarea {
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.tableBorder {
border: #89B7D8 1px solid
}
.hidden_a_line{
noline:expression(this.onfocus=this.blur);
}
.tableBorder_bold {
border: #EEEEEE 4px solid;
padding:5px;
}
.tableBorder_gray {
border: #C7C7C7 1px solid
}
.table1{
background-color:#AEAEAE;
padding:5px;
}PictureCheckCode.java
package com.demo;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.geom.Line2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
public class PictureCheckCode extends HttpServlet {
public PictureCheckCode() {
super();
}
public void destroy() {
super.destroy();
}
public void init() throws ServletException {
super.init();
}
//获取随机颜色
Color getRandColor(int fc, int bc) {
Random random = new Random();
if (fc > 255) fc = 255;
if (bc > 255) bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//禁止缓存图片
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 指定生成的响应是图片
response.setContentType("image/jpeg");
int width = 70;
int height = 17;
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Graphics2D g2d=(Graphics2D)g;
Random random = new Random();
Font mFont = new Font("华文宋体", Font.BOLD, 17);
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
g.setFont(mFont);
g.setColor(getRandColor(180, 200));
//画随机的线条
for (int i = 0; i < 130; i++) {
int x = random.nextInt(width - 1);
int y = random.nextInt(height - 1);
int x1 = random.nextInt(6) + 1;
int y1 = random.nextInt(12) + 1;
BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL);
Line2D line=new Line2D.Double(x,y,x+x1,y+y1);
g2d.setStroke(bs);
g2d.draw(line);
}
String sRand="";
//输出随机的验证文字
int itmp=0;
for(int i=0;i<4;i++){
if(random.nextInt(2)==1){
//生成A~Z的字母
itmp=random.nextInt(26)+65;
}
else{
//生成0~9的数字
itmp=random.nextInt(10)+48;
}
char ctmp=(char)itmp;
sRand+=String.valueOf(ctmp);
Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110));
g.setColor(color);
/****随机缩放文字并将文字旋转指定角度**/
//将文字旋转指定角度
Graphics2D g2d_word=(Graphics2D)g;
AffineTransform trans=new AffineTransform();
trans.rotate(random.nextInt(45)*3.14/180,15*i+10,6);
//缩放文字
float scaleSize=random.nextFloat()+0.5f;
if(scaleSize<0.8 || scaleSize>1.1f) scaleSize=1f;
trans.scale(scaleSize, scaleSize);
g2d_word.setTransform(trans);
g.drawString(String.valueOf(ctmp),15*i+10,14);
}
//将生成的验证码保存到Session中
HttpSession session=request.getSession(true);
//声明并实例化Encode的实例
Encode encode=new Encode();
//将加密后的验证码保存到Session
session.setAttribute("randCheckCode",encode.encodeByMD5(sRand));
g.dispose();
ImageIO.write(image,"JPEG",response.getOutputStream());
}
}
Encode.java
package com.demo;
import java.security.MessageDigest;
public class Encode {
public String encode(String str, String algorithm) {
if (str == null) {
return null;
}
//声明并实例化StringBuilder类的对象
StringBuilder sb = new StringBuilder();
try {
//创建使用MD5加密算法的对象
MessageDigest code = MessageDigest.getInstance(algorithm);
//将要加密信息中的所有字节提供给该对象
code.update(str.getBytes());
//调用digest方法完成消息摘要的计算，并以字节数组的形式返回消息摘要
byte[] bs = code.digest();
//将加密后的字节数组转换成十六进制的字符串，形成最终的密文
for (int i = 0; i < bs.length; i++) {
int v = bs[i] & 0xFF;
if (v < 16) {
sb.append(0);
}
sb.append(Integer.toHexString(v));
}
}
catch (Exception e) {
e.printStackTrace();
}
//将加密后的字符串中的英文字母转换为大写
return sb.toString().toUpperCase();
}
public String encodeByMD5(String str){
return encode(str,"MD5");
}
}
web.xml
TML标签：
所有内容都在<html></html>标签之内；
<head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中。
<head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中；
<body></body>是页面的主体，大部分显示内容都定义在这里。
HTML注释：<!-- -->：
注释不允许嵌套
html常用标签:
h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
<br/>只是回车，<p>是段落。<p>前后会有比较大的空白，而<br/>则没有。
<center>居中显示.
<b>、<strong>粗体，<i>、<em>斜体。<u>下划线。
<sub>2</sub>下标，如：H<sub>2</sub>O
<sup>2</sup>上标，如：10<sup>2</sup>
<font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）
<hr> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）
<pre> 预格式化 保持本色;
HTML特殊字符：<（小于号，less than）；>（大于号，greater than）； （空格）。
超链接：<a>标签的一些常用属性：href、title、target、name
插入图片：<img src=“路径”/>
列表：dl→(定义列表)，ul→(无序列表)， ol→(有序列表)。
表格：<table>；创建行：<tr>；创建单元格：<td>；表页眉：<thead>；表主体：<tbody>；表页脚：<tfoot>；表头：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox表单标签：（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。
meta标签：（包括在head标签中。主要用来描述页面自身信息,元信息）
<meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>
<meta name="description" content="免费更新最新C#相关技术知识，主要包括：.net基础,网页前端,三层架构,SQL数据库..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码
<meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
<meta name="名字" content="值" />关于网页的描述信息。
<meta http-equiv="名字" content="值" />模拟http响应头信息。
C#编程自学_做最好的.net自学资料站_更多文章请访问：http://www.4k8k.net/
欢迎订阅。
*请认真填写需求信息，我们会在24小时内与您取得联系。
