1.1 基础 JavaScript 实例

<body>

    <script type="text/javascript">

        document.write("<h1>Hello World!</h1>")

    </script>

</body>

生成普通文本和标签

<body onload="message()">

    <h1>页面还未显示前调用js</h1>

    <script type="text/javascript">

    function message() {

        alert("该提示框是通过 onload 事件调用的。")

    }

    </script>

</body>

页面还未显示前调用js

<body onload="message()">

    <p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p>

    <script type="text/javascript">

        var firstname;

        firstname="George";

        document.write(firstname);

        document.write("<br />");

        firstname="John";

        document.write(firstname);

    </script>

</body>

声明一个变量，为它赋值，然后显示出来

<body>

    <script type="text/javascript">

        var x = navigator;

        document.write("CodeName=" + x.appCodeName);            // 代码：

        document.write("<br />");

        document.write("Name=" + x.appName);                     // 浏览器：

        document.write("<br />");

        document.write("Version=" + x.appVersion);              // 浏览器版本：

        document.write("<br />");

        document.write("CookieEnabled=" + x.cookieEnabled);    // 是否启用Cookies

        document.write("<br />");

        document.write("CPUClass=" + x.cpuClass);

        document.write("<br />");

        document.write("OnLine=" + x.onLine);

        document.write("<br />");

        document.write("Platform=" + x.platform);              // 平台：

        document.write("<br />");

        document.write("UA=" + x.userAgent);                    // 浏览器的用户代理报头

        document.write("<br />");

        document.write("BrowserLanguage=" + x.browserLanguage);

        document.write("<br />");

        document.write("SystemLanguage=" + x.systemLanguage);

        document.write("<br />");

        document.write("UserLanguage=" + x.userLanguage);

        /* 运行结果：

        CodeName=Mozilla

        MinorVersion=undefined

        Name=Netscape

        Version=5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

        CookieEnabled=true

        CPUClass=undefined

        OnLine=true

        Platform=Win32

        UA=Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

        BrowserLanguage=undefined

        SystemLanguage=undefined

        UserLanguage=undefined

        */

    </script>

</body>

检测浏览器的全部信息

<body onload="detectBrowser()">

    <script type="text/javascript">

        function detectBrowser() {

            var browser=navigator.appName;

            var b_version=navigator.appVersion;

            var version=parseFloat(b_version);

            if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))

              {alert("您的浏览器够先进了！")}

            else

              {alert("是时候升级您的浏览器了！")}

        }

    </script>

</body>

根据浏览器类型提醒用户

1.2  JavaScript字符串操作

<body>

    <script type="text/javascript">

        var txt="Hello World!";

        //1、字体变大、变小

        document.write("<p>Big: " + txt.big() + "</p>");

        document.write("<p>Small: " + txt.small() + "</p>");

        //2、载体加粗、变斜体

        document.write("<p>Bold: " + txt.bold() + "</p>");

        document.write("<p>Italic: " + txt.italics() + "</p>");

        //3、字体颜色、大小

        document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>");

        document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>");

        //4、字母大写、小写

        document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>");

        document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>");

        //5、字体添加a标签属性

        document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>");

        //6、字体放到上角、下角

        document.write("<p>Subscript: " + txt.sub() + "</p>");

        document.write("<p>Superscript: " + txt.sup() + "</p>");

        document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>");

        document.write("<p>Fixed: " + txt.fixed() + "</p>");

        document.write("<p>Strike: " + txt.strike() + "</p>");

    </script>

</body>

为字符串添加样式

<body>

    <script type="text/javascript">

        var str="Visit Microsoft!";

        document.write(str.replace(/Microsoft/,"W3School"))

    </script>

</body>

替换字符串中的字符 - replace()

1.3 JavaScript Math（算数对象）实例

<body>

    <script type="text/javascript">

        document.write(Math.round(0.60) + "<br />");     //结果：1

    </script>

</body>

使用 round() 对数字进行舍入

    <script type="text/javascript">

        document.write(Math.random());   // 0.05979463347692282

    </script>

使用 random() 来返回 0 到 1 之间的随机数

    <script type="text/javascript">

        document.write(Math.max(5,7) + "<br />");   // 运行结果：7

    </script>

使用 max() 来返回两个给定的数中的较大的数

    <script type="text/javascript">

        document.write(Math.min(5,7) + "<br />");   // 运行结果：5

    </script>

使用 min() 来返回两个给定的数中的较小的数

 

01: JavaScript实例的更多相关文章

  1. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  2. JavaScript实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

随机推荐

  1. import tkinter与from tkinter import *的区别

    from tkinter import * class DirList(object): def __init__(self,initdir=None): self.top= Tk() ##可以不加t ...

  2. HDU 6447 - YJJ's Salesman - [树状数组优化DP][2018CCPC网络选拔赛第10题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6447 Problem DescriptionYJJ is a salesman who has tra ...

  3. Java中子类是否可以继承父类的static变量和方法而呈现多态特性

    静态方法 通常,在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法,关于static方法,声明为static的方法有以下几条限制: 它们仅能调用其他的static 方法. 它 ...

  4. 网站搜索引擎优化(SEO)的18条守则

    1.永远不要放过网页的title,这个地方应该是你每次优化的重点. 2.请不要在title,deion,keyword里写太多东西,越是贪婪,得到的就越少. 3.网页的头部和底部是很重要的,对于搜索引 ...

  5. IP地址必知

    IP地址分类:A类IP段 0.0.0.0 ~ 127.255.255.255(0nnnnnnn.hhhhhhhh.hhhhhhhh.hhhhhhhh)(保留给ZF或大型企业)B类IP段 128.0.0 ...

  6. dedecms如何快速删除跳转的文章(记得清空内容回收站)

    网站内容更新多了,有些页面修改了,这时其他相关页面也要做相应的调整,不然可能会出现404错误,那么dedecms如何快速删除跳转的文章呢?下面就随ytkah一起操作一下吧 如上图所示,在“核心”(标示 ...

  7. android侧滑删除，模仿qq跟进item显示删除按钮

    今天所写的代码只是为了个人以后查询方便,如果你参考了并且在使用中遇到问题也可以在这里直接回复我 SwipeDelMenuLayout: 效果图: item布局: <?xml version=&q ...

  8. ListView and gridview常用属性

    刷新:notifyDataSetChanged 1.gridview常用属性 GridView的一些特殊属性:   1.Android:numColumns=”auto_fit”   //GridVi ...

  9. Selenium+Java元素定位之三

    首先自己先准备一个表格代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  10. ev3_basic——HITCON CTF 2018

    [MISC] EN-US This challenge provides a jpg file and a pklg file. The jpg is shown a part of string o ...