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. R中使用rvest爬取数据小试

    总结R中使用 xpath 和 css selectors 获取标签内容(xpath功能强大,而CSS选择器通常语法比较简洁,运行速度更快些) 例:抓取下面标签的内容: <h3 class=&qu ...

  2. 汉诺塔问题(The Tower of Hanoi)的递归算法与非递归算法

    非递归算法: 根据圆盘的数量确定柱子的排放顺序: 若n为偶数,按顺时针方向依次摆放 A B C: 若n为奇数,按顺时针方向依次摆放 A C B. 然后进行如下操作: (1)按顺时针方向把圆盘1从现在的 ...

  3. UVA 11768 - Lattice Point or Not

    首先本题需要用到扩展欧几里得算法…… 关于exgcd算法的一点简略证明: 那么,对于函数exgcd(a,b)=(d,x,y),其中d满足d=gcd(a,b); (x,y)满足ax+by=d; 则exg ...

  4. Django的quarySet

    models.py 代码 from django.db import models # Create your models here. class Author(models.Model): nam ...

  5. CodeForces - 55C Pie or die 想法题(猜程序)

    http://codeforces.com/problemset/problem/55/C 题意:一个博弈. 题解:瞎猜,目前不清楚原理 #include<iostream> #inclu ...

  6. Python开发【模块】:Weakref

    Weak references 前言: weakref模块允许python开发者创建弱引用对象. 再接下来中,术语referent代表被弱引用所引用的对象. 一个弱引用对于对象是不能够保持对象存活的: ...

  7. RHEL6 Systemtap 安装笔记

    以 RHEL6u3 为例 1  Systemtap 安装 yum install systemtap 跟systemtap有关的有6,7个,全装上,别偷懒 就用yum安装,别傻傻的去下rpm包,吃力不 ...

  8. 仿照hibernate封装的一个对数据库操作的jdbc工具类

    package project02_Order_management.util; import java.io.IOException; import java.lang.reflect.Field; ...

  9. css内边距 边框

    /*1 元素的各边都有 10 像素的内边距 四个值上.右.下.左 两个上下,左右 三个值:上,左右,下*/ /*p {padding: 10%;}*/ h1 { padding-top: 10px; ...

  10. filter push down

    filter push down filter push down :先filter再做join 如果SQL里有where条件,那么数据库引擎会先filter再做join 但是MySQL5.6之前还不 ...