整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript中輸出方法

          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標簽:

          1. 所有內容都在<html></html>標簽之內;

          2. <head></head>內放的是頭部信息,是對頁面的描述,不會直接顯示在頁面中。

          3. <head></head>內的<title></title>中設置的是頁面的標題,<title></title>只能放在<head></head>中;

          4. <body></body>是頁面的主體,大部分顯示內容都定義在這里。

        1. HTML注釋:<!-- -->:

          1. 注釋不允許嵌套

        2. html常用標簽:

          1. h標簽(標題),HTML定義了<h1></h1>到<h6></h6>六個h標簽,分別表示不同大小的字體。h1最大,h6最小。

          2. <br/>只是回車,<p>是段落。<p>前后會有比較大的空白,而<br/>則沒有。

          3. <center>居中顯示.

          4. <b>、<strong>粗體,<i>、<em>斜體。<u>下劃線。

          5. <sub>2</sub>下標,如:H<sub>2</sub>O

          6. <sup>2</sup>上標,如:10<sup>2</sup>

          7. <font></font>字體標簽,<font color=“red“ size=“7” face=“隸書”>紅色</font>。color(設置顏色) size(1-7) face(設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示)

          8. <hr> color size(厚度) width(長度) align=left/center/right (默認為劇中顯示)

          9. <pre> 預格式化 保持本色;

          10. HTML特殊字符:&lt;(小于號,less than);&gt;(大于號,greater than);&nbsp;(空格)。

          11. 超鏈接:<a>標簽的一些常用屬性:href、title、target、name

          12. 插入圖片:<img src=“路徑”/>

          13. 列表:dl→(定義列表),ul→(無序列表), ol→(有序列表)。

          14. 表格:<table>;創建行:<tr>;創建單元格:<td>;表頁眉:<thead>;表主體:<tbody>;表頁腳:<tfoot>;表頭:<th>。

          15. rowspan(合并行)、colspan(合并列)

          16. <input>是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox表單標簽:(復選框)、file(文件選擇框)、hidden(隱藏字段)、image(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)。

          • meta標簽:(包括在head標簽中。主要用來描述頁面自身信息,元信息)

          1. <meta name="keywords" content="C#學習資料,4k8k.net,.net開發,軟件開發,編程自學網"/>

          2. <meta name="description" content="免費更新最新C#相關技術知識,主要包括:.net基礎,網頁前端,三層架構,SQL數據庫..."/>

          3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網頁編碼

          4. <meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網頁。

          5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網頁。

          6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。

          7. <meta name="名字" content="值" />關于網頁的描述信息。

          8. <meta http-equiv="名字" content="值" />模擬http響應頭信息。

          C#編程自學_做最好的.net自學資料站_更多文章請訪問:http://www.4k8k.net/

          歡迎訂閱。


          主站蜘蛛池模板: 九九无码人妻一区二区三区| 亚洲av无码天堂一区二区三区| 日韩精品一区二区三区中文精品| 国产成人一区二区三区精品久久| 国产日韩一区二区三免费高清| 国产一区二区精品在线观看| 国产精品电影一区| 国产在线精品一区二区不卡麻豆| 精品一区二区三区免费毛片| 男人的天堂av亚洲一区2区 | 男插女高潮一区二区| 国产在线观看一区二区三区四区 | 日韩一区二区免费视频| 日韩一区二区久久久久久| 国产成人高清精品一区二区三区| 精品国产一区二区三区免费看| 亚洲男女一区二区三区| 国产亚洲无线码一区二区| 中文字幕在线观看一区二区| 精品一区二区三区在线视频观看 | 欧洲亚洲综合一区二区三区| 亚拍精品一区二区三区| 久久综合精品不卡一区二区| 国产综合精品一区二区三区| 国精品无码一区二区三区在线| 日本精品高清一区二区| 亚洲AV无码一区二区三区国产| 亚州国产AV一区二区三区伊在| 一区二区三区视频网站| 久久影院亚洲一区| 狠狠色婷婷久久一区二区| 国产一区二区三区在线观看精品| 亚洲一区无码精品色| 不卡一区二区在线| 国产乱码一区二区三区爽爽爽| 亚洲AV综合色区无码一区爱AV| 亚洲AV午夜福利精品一区二区| 亚洲国产国产综合一区首页| 国产91精品一区二区麻豆网站| 无码av人妻一区二区三区四区| 精品国产一区二区三区AV|