01: JavaScript实例
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实例的更多相关文章
- javaScript系列 [01]-javaScript函数基础
[01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...
- JavaScript实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-推断图片是否载入完毕
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-递归实现反转数组字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一些有用的javascript实例分析(三)
原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...
随机推荐
- 网络层 运输层 NAT路由器 NATP路由器 一根光纤 多个固定ip
长城宽带想要公网和固定ip的来看看吧.[迅雷赚钱宝吧]_百度贴吧 https://tieba.baidu.com/p/4035318158?red_tag=0898389066 连续电话投诉加咨询一周 ...
- 场景服务只创建了 Service Difinition 和feature layer
环境:物理机 pro1.4:虚拟机 (server + datastore + portal + adaptor) 10.4.1 发布场景服务,正常情况应portal中查看,应包含四部分内容:Serv ...
- Word文档中的格式标记大全
在Word中有很多的格式设置,很多格式设置都会有一些标记,这些标记是隐藏的,在打印文档时是不会打印出来的,但是它们却起着结构化文档的大作用.如果你在编辑文档,不妨点击格式标记开关,看看都有哪些格式标记 ...
- Mybatis插入数据后返回主键id
有时候使用mybatis插入数据后,需要用到记录在数据库中的自增id,可以利用keyProperty来返回,赋值给实体类中的指定字段. 单条记录插入并返回 First, if your databas ...
- 涉及不同实例不同数据库的同一条sql语句
exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed Querie ...
- bootstrap弹出模态框
(1)引入jquery, bootstrap相关的 jquery下载地址: https://jquery.com/download/ bootstrap下载地址: https://v3.bootcss ...
- BUG笔记：Firefox select选项右侧边框没了
Firefox 的default select在某些情况下右侧边框会消失.截图如下: 这个目前为止没有看到有任何解决方案,HACK也没有...囧... 有高人知道吗?
- [py][mx]django使用class写views-免去判断方法的烦恼
修改views使用class模式 类模式写views - 免去了函数模式的判断的烦恼 users/views.py from django.views.generic import View clas ...
- pop to 特定的UIViewController
1. 我们可以推出到特定的UIViewController 2. 有一个类没有navigationController,以前一般用delegate,我觉得我们可以把引用一个navigationCont ...
- 利用lodop打印控件轻松实现批量打印 （转载http://www.thinkphp.cn/topic/13085.html）
最近在做一个打印程序,要实现批量打印功能,在网上找了很多天,也在tp官网咨询大牛们,对大家的的提议我一一进行了研究,总结如下: 要实现批量打印可以有两个办法: 一是利用专业的报表程序,能实现十分复杂的 ...