JavaScript（一）

最新推荐文章于 2024-07-27 17:56:15 发布

baizaimen0393

最新推荐文章于 2024-07-27 17:56:15 发布

阅读量184

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/in-the-game-of-thrones/p/11377409.html

版权

JavaScript是一种基于对象和时间驱动的、并且具有安全性能的脚本语言。向HTML页面中添加交互行为，与Java语言类似，是属于解释性语言边执行边解释。

JavaScript组成：

　　ECMAScript　　　　DOM　　　　BOM

JavaScript可以写在三个位置，

　　1、使用<script>标签；

　　2、引用外部的js文件<script src="hello.js" language="javascript"></script>；

　　3、直接写在HTML标签中<input type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');" />

JavaScript数据类型，

　　undefined：var width;//变量width没有始值，所以将会被赋予初始值undefined；

　　object：//表示所有的对象类型

　　number：//var inum=23；表示整形；var num=23.3；表示浮点型

　　boolean：//true或false

　　string：//一组有双引号或者单引号括起来的文本

　　function：//代表函数类型

typeof：可以检测变量的返回值

document.write()：可以将信息输出到页面中

console.log()：可以将信息输出到控制台中

JavaScript中string对象的常用方法：

　　字符串对象 . leng：//获取字符串的长度

　　charAt(index)：//返回指定位置的字符串，从0开始

　　indexOf(str,index)：//查找指定的字符串在字符串中首次出现的位置

　　substring(index1,index2)：//返回自动索引之间的字符串，包前不包后

　　split(str)：//将字符串分隔为字符串数组

JavaScript中数组的应用

　　length：设置或返回数组中元素的数目，属性

　　join()：把数组中的元素放入到一个字符串中，通过一个分隔符分隔

　　sort()：对数组排序

　　push()：向数组末尾添加一个或更多的元素，并且返回信得长度

　　unshift()：将一个元素添加到数组的开头，并且返回数组的长度

　　shift()：把数组中的第一个元素去除，并且返回第一个元素的值

　　splice(2,3,"aaa")：表示从索引为2 开始的3个元素删除，并且用aaa来代替被删除的元素

　　slice(2,3)：表示从索引为2开始的3个元素复制到新的数组中，并且返回新的数组，对旧的数组不会改变

JavaScript中常用的函数

　　alert('alert表示弹窗');

　　prompt('提示文字','初始值');//prompt表示提示框，可以进行输入

　　　　如：prompt('输入次数','0')

　　parseInt('字符串')：将字符串转换为整形的数字，parseInt("55")得到55

　　isNaN()：用于检查参数是否是非数字

　　自定义函数：相当于java中的方法

　　　　function 函数名( [ 参数1、参数2、。。。 ] ){//参数可有可无

　　　　　　//JavaScript语句;

　　　　　　[ return 返回值 ]//可有可无

　　　　}

　　　　函数的调用一般和表单元素的事件一起使用，格式：事件名=" 函数名() ";

　　匿名函数，既没有函数名

　　　　var showFun = function(count){

　　　　　　for(var i = 0; i < count; i++){

　　　　　　　　document.write('<h2>hello</h2>');

　　　　　　}

　　调用匿名函数：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>函数的使用</title>
 6 </head>
 7 <body>
 8 <input type="button" value="点击看看" οnclick="showFun(prompt('输入次数','0'))">
 9 </body>
10 <script type="application/javascript">
11     var showFun = function(cout){
12         for (var i = 0; i < cout; i++) {
13             document.write('hello');
14         }
15     }
16 </script>
17 </html>

BOM模型可以实现功能有

　　弹出新的浏览器窗口

　　移动、关闭浏览器窗口以及调正窗口的大小

　　页面的前进、后退

Window对象的常用属性

　　history　　有关客户访问过的URL的信息

　　　　history常用的方法　　

　　　　back()　　加载history对象列表中的前一个URL

　　　　forward()　　加载history对象列表中的下一个URL

　　　　go()　　加载history对象列表中的某个具体URL

　　　　　　history.back() 等价于 history.go(-1)；相当于浏览器中的后退

　　　　　　history.forward() 等价于history.go(1)；相当于浏览器中的前进

　　location　　有关当前URL的信息

　　　　语法：window.属性名="属性值";

　　　　如：window.location="https://www.baidu.com";//表示跳转到百度主页，注意window必须小写

　　　　location对象的常用属性

　　　　　　host　　设置或返回主机名和当前URL的端口号

　　　　　　hostname　　设置或返回当前URL的主机名

　　　　　　href　　设置或返回完整的URL

　　　　location对象的常用方法

　　　　　　reload()　　重新加载当前文档（相当于刷新操作）

　　　　　　replace()　　用新的文档替换当前的文档

　　window对象的常用方法

　　　　prompt()　　显示可提示用户输入的对话框

　　　　alert()　　显示带有一个提示消息和一个确定按钮的警示框

　　　　confirm()　　显示一个带有提示信息】确定和却笑按钮的对话框，返回boolean类型

　　　　close()　　　关闭浏览器窗口

　　　　open()　　打开一个新的浏览器窗口，加载给定URL所指定的文档

　　　　setTimeout()　　在指定的毫秒数后调用函数或计算表达式

　　　　setInterval()　　按照指定的周期（以毫秒计）来调用函数或表达式

　　　　　　open()　　窗口特征

　　　　　　height、width窗口文档显示区的高度、宽度。以像素计。

　　　　　　left、top窗口的x坐标、y坐标。以像素计

　　　　　　toolbar=yes|no 或者1|0是否显示李兰器的工具栏，默认是yes　　

　　　　　　scrollbars=yes|no 1|0是否显示滚动条。默认是yes

　　　　　　location=yes|no 1|0是否显示地址地段。默认是yes

　　　　　　status=yes|no 1|0是否添加状态栏。默认是yes

　　　　　　menbar=yes|no 1|0是否显示菜单栏。默认是yes

　　　　　　resizable=yes|no 1|0窗口是否可调接尺寸，默认是yes

　　　　　　titlebar=yes|no 1|0是否显示标题栏。默认是yes

　　　　　　fullscreen=yes|no 1|0是否使用全屏模式显示浏览器

　　window对象的常用事件

　　　　onload　　一个页面或一副图像完成加载

　　　　onmouseover　　鼠标移到某元素之上

　　　　onclick　　当用户单击某个对象时调用的事件

　　　　onkeydown　　摸个键盘按键被按下事件

　　　　onchange　　域的内容被改变

　　打字游戏

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>jinshanGame</title>
  6     <style>
  7         #game_body{
  8             position: absolute;
  9             top: 0;
 10             left: 0;
 11             right: 0;
 12             bottom: 0;
 13             margin: auto;
 14             width: 800px;
 15             height: 600px;
 16             box-shadow:0 0 5px lightgrey;
 17         }
 18         #game_window{
 19             width: 100%;
 20             height: 500px;
 21             border-bottom: 1px solid lightgrey;
 22         }
 23         #score_lab{
 24             width: 100%;
 25             height: 40px;
 26             text-align: center;
 27             line-height: 40px;
 28             font-size: 20px;
 29         }
 30         button{
 31             display: block;
 32             width: 100px;
 33             margin: auto;
 34         }
 35         .code {
 36             position: absolute;
 37             top: 0;
 38             width: 50px;
 39             height: 50px;
 40             font-size: 25px;
 41             line-height: 50px;
 42             text-align: center;
 43             box-shadow: 0 0 5px lightgrey;
 44             border-radius:5px;
 45         }
 46     </style>
 47 </head>
 48 <body>
 49 <div id="game_body">
 50     <div id="game_window"></div>
 51     <div id="score_lab">----</div>
 52     <button οnclick="startGame()">开始游戏</button>
 53 </div>
 54 </body>
 55 <script>
 56     var str = "abcdefghijklmnopqrstuvwxyz"; //定义26个字母
 57     var colorArr = ['antiquewhite','lightgrey','cornflowerblue','lightgreen','sienna','slateblue'];
 58     //获取到游戏窗口
 59     var parentWindow = document.getElementById("game_window");
 60     var button = document.getElementsByTagName("button")[0];
 61     var childCount = 0;
 62     var score = 0;   //定义一个分数计数器
 63     //创建一个定时器函数随机生成这个div
 64     var flag = true;
 65     var t = null;
 66     var m = null;
 67     function startGame(){
 68         if(flag){
 69             button.innerHTML="停止";
 70             t= setInterval(loopGenerate,1000)
 71             if(score<0){
 72                 clearInterval(t);
 73             }
 74             flag=!flag;
 75         }else{
 76             location.reload();
 77         }
 78     }
 79     function loopGenerate(){
 80         var emp = document.createElement("div");
 81         var num = Math.floor(Math.random()*colorArr.length);
 82         var rand= Math.floor(Math.random()*26);
 83         emp.className = "code";
 84         emp.style.backgroundColor =colorArr[num];
 85         emp.style.left = Math.floor(Math.random()*750)+"px";
 86         emp.innerText = str.charAt(rand).toUpperCase();
 87         parentWindow.appendChild(emp);
 88         childCount++;
 89         //定义一个定时器函数让这些div随机往下掉
 90         m =setInterval(caseDown,100);
 91         if(score<0){
 92             clearInterval(m);
 93             clearInterval(t);
 94         }
 95         function caseDown(){
 96             var empTop = emp.offsetTop;
 97             empTop +=10;
 98             emp.style.top = empTop+"px";
 99             // console.log(empTop);
100             if(empTop>450){  //当这个div的距离顶部的偏移量大于其父元素的高度减去它本身的高度时
101                 emp.remove();
102                 score-=10;
103             }
104             document.getElementById("score_lab").innerHTML = score;
105         }
106     }
107     //定义一个函数 接收window的按键事件 当按下一个键 即触发此函数
108     window.onkeydown = function(){
109         var e = window.event||event;
110         var keyCode = e.keyCode;
111         var s = String.fromCharCode(keyCode);
112         var children = parentWindow.childNodes;
113         for (var i = 0; i < children.length; i++) {
114             if(children[i].innerHTML == s){
115                 children[i].remove();
116                 score+=10;
117             }
118 
119         }
120     }
121 </script>
122 </html>

JavaScript（二）

转载于:https://www.cnblogs.com/in-the-game-of-thrones/p/11377409.html

baizaimen0393

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（一）

JavaScript是一种基于对象和时间驱动的、并且具有安全性能的脚本语言。向HTML页面中添加交互行为，与Java语言类似，是属于解释性语言边执行边解释。JavaScript组成：　　ECMAScript　　　　DOM　　　　BOMJavaScript可以写在三个位置，　　1、使用<script>标签；　　2、引用外部的js文件<script sr...
复制链接

扫一扫