zoukankan      html  css  js  c++  java
  • javascript文本对象

    1、获取浏览器的对象属性

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

      <head>

        <title>获取浏览器的对象属性</title>

     

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

      

      <body>

    <script language "javascript" type "text/javascript">

    with (document) {

    write("你的浏览器信息:<ol>");

    write("<li>代码:" navigator.appCodeName);  //浏览器的代码

    write("<li>名称:" navigator.appName);  //浏览器的名称

    write("<li>版本: navigator.appVersion);

    write("<li>语言:" naviagtor.language);

    write("<li>编译平台:" navigator.platform);

    write("<li>用户表头: navigator.userAgent);

    }

    </script>

       </body>

    </html>

     

     

     

    2、设置背景和字体的颜色

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

      <head>

        <title>设置背景和字体的颜色</title>

     

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

    <style type "text/css">

    body {

    text-align:center;

    }

    </style>

     

    <script language "javascript" type "text/javascript">

    document.bgColor "black";

    document.fgColor "white";

     

    function changeColor() {

    document.bgColor "";  //设置背景颜色

    document.body.text "blue";  //设置字体颜色

    }

     

    function outcolor() {

    document.bgColor "pink";

    document.body.text "white";

    }

     

    </script>

      </head>

      

      <body>

        <h1 onMouseOver "changeColor()" onMouseOut "outcolor()">静夜思<h1>

    <p onMouseOver "changeColor()" onMouseOut "outcolor()">床前明月光,</p>

    <p onMouseOver "changeColor()" onMouseOut "outcolor()">疑似地上霜。</p>

    <p onMouseOver "changeColor()" onMouseOut "outcolor()">举头望明月,</p>

    <p onMouseOver "changeColor()" onMouseOut "outcolor()">低头思故乡。</p>

      </body>

    </html>

     

     

     

    3、防盗链

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

      <head>

        <title>防盗链</title>

     

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

     

      </head>

      

      <body>

        <script language "javascript" type "text/javascript">

    <!--

    var frontURL document.referrer;  //获取上次的连接地址

    var host location.hostname;

     

    if ("" != frontURL) {

    var frontHost frontURL.subString(7, host.length 7);

    if (host == frontURL) {

    alert("没有盗链!!");

    else {

    alert("您是非法盗链,请通过本部访问!!");

    }

    else {

    alert("您是直接打开该文档,没有盗链!!");

    }

    -->

    </script>

      </body>

    </html>

     

     

    4、自动选择文本框的内容

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

      <head>

        <title>自动选择文本框的内容</title>

     

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

    <script language "javascript" type "text/javascript">

    function Selected() {

    form1.text.focuse();  //取得文本框焦点

    form1.text.select();  //选择文本框

    }

     

    function show() {

    alert(form1.text.value); 

    }

    </script>

     

      </head>

      

      <body onload "Selected()">

        <form id "form1" name "form1" method "post" action "">

    <label>

    <!--  <input type "text" name "text" value "自动选择文字" />  -->

    <input type "text" name "text" value "自动选择文字" onmouseover "this.value '';" />

    </label>

    <input type "submit" value "提交" id "ok" name "ok" onclick "show()" />

    </form>

      </body>

    </html>

     

    这是个比较常用到的功能,帮客户自动选择文本框的内容减少客户的输入量!

     

    5、表单验证

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

      <head>

        <title>表单的验证</title>

     

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

    <script language "javascript" type "text/javascript">

    function check() {

    if (form1.username.value == "" || "" == form1.password.value || "" == form1.email.value) {

    //alert(username);

    var name form1.username.value;

    form1.username.value "" name;

    alert("您的资料没有完善!!");

    else {

    var str form1.email.value;

    var str.indexOf("@", 1);  //简单地验证邮箱

    if((n == -1) || (str.length 1) == n) {

    alert("您的Email地址不合法,请重新输入!!");

    return false;

    alert("验证成功!!!");

    }

    }

     

    function Reset() {

    var result confirm("您确定要重置表单吗??重置后已经填写的内容会没有了!!");  //人性化提示

    return result;  

    }

    </script>

      </head>

      

      <body>

        <form id "form1" name "form1" method "post" action "" onreset "return Reset()">

    用户名:<input type "text" name "username" id "username"/><br />

    密  码:<input type "password" name "password" /><br />

    邮  箱:<input type "text" name "email" /><br />

    <input type "submit" name "ok" value "提交" onclick "check()"/>

    <input type "reset" name "cancel" value "重置" />

    </form>

      </body>

    </html>

     

    上面是最简单的前台信息验证。

     


    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 相关阅读:
    Linux内核调试方法总结之ftrace
    Linux内核调试方法总结之ptrace
    Linux内核调试方法总结之ltrace
    文件处理
    python基础之字符编码
    第三篇:python基础之数据类型与变量
    第二篇:python基础之核心风格
    数据类型、字符编码、文件处理
    python入门
    爬取加载页面数据
  • 原文地址:https://www.cnblogs.com/ubuntuvim/p/4796563.html
Copyright © 2011-2022 走看看