目录
1.js重定向
2.运算
3.判断语句
4.函数
5.数组
7.随机数
8.未分类知识
9.定时器
10.事件
1.js重定向
点击a,form标签都会显示提示框alert
<body>
//都能激活提示框
<a href="javascript:alert('我是重定向的代码');">hellow</a>
<form action="javascript:alert('提交表单');">
<input type="submit" value="提交表单" />
</form>
</body>
2.运算
1.逻辑运算
// 与运算(要求左右两边的条件都是true，结果是true)
var hd = 11>2 && 3>2;
// 或运算(左右两边条件至少有一边是true,结果才是true)
var hd = 11>20 || 3>21;
// 非运算(取反，真的变成假的，假的变成真的)
var hd = !(2>1);
2.判断
== 只判断内容,不管类型
=== 全等,既判断内容,又判断类型
!= 只判断内容,不管类型
!== 既判断内容,又判断类型
var x = '6';
var y = 6;
var hd = x==y;//true
var hd = x===y;//false
var hd = x!=y;//true
var hd = x!==y;//false
document.write(hd);
3.逻辑运算
<script type="text/javascript">
// 与运算(要求左右两边的条件都是true，结果是true)
// var hd = 11>2 && 3>2;
// 或运算(左右两边条件至少有一边是true,结果才是true)
// var hd = 11>20 || 3>21;
// 非运算(取反，真的变成假的，假的变成真的)
// var hd = !(2>1);
var hd = 0 && 'JavaScrtpt';
// var hd = 1 || 0;
document.write(hd)
if (hd) {
document.write("成立O(∩_∩)O");
}else{
document.write("不成立o(╥﹏╥)o");
}
</script>
4.三元运算
<script type="text/javascript">
// 三元运算符/三元表达式
// (条件)?条件为真的时候返回的值:条件为假的时候返回的值;
var age = prompt('请输入你的年龄');
var hd = (age>=18)?'成年人':'未成年小朋友';
document.write(hd);
</script>
5.自定义运算
<script type="text/javascript">
// 接收到的是字符串所以要*1
var x = prompt('请输入第一个数字')*1;
var charset = prompt('请输入运算符+-*/');
var y = prompt('请输入第二个数字')*1;
switch(charset){
case '+':
var result = x+y;
break;
case '-':
var result = x-y;
break;
case '*':
var result = x*y;
break;
case '/':
var result = x/y;
break;
default:
var result = '你输入的有误';
}
document.write(result);
</script>
6.九九乘法表
<script type="text/javascript">
for (var i=1;i<=9;i++) {
for (var j=1;j<=i;j++) {
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<br />");
}
</script>
7.金字塔
<script type="text/javascript">
var rows = prompt('请输入行数');
// 他可以用的值有rows,i,
for (var i=1;i<=rows;i++) {
//输出 总行数-i 个☆
for (var x = 0;x<rows-i;x++) {
document.write("☆");
}
//输出 当前行数*2-1 个★
for (var y=0;y<i*2-1;y++) {
document.write("★");
}
//换行
document.write("<br />");
}
</script>
另外一种金字塔代码
<script type="text/javascript">
// ☆
// var f = prompt("请输入")
for(a=5;a>0;a--){
//
for(b=1;b<a;b++){
document.write("★")
}
for(c=0;c<6-a;c++){
document.write("☆")
}
for(e=1;e<6-a;e++){
document.write("☆")
}
document.write("<br />")
}
</script>
8.自定义行列表格
<script type="text/javascript">
// document.write("后");
// document.write("盾");
// document.write("人");
var rows = prompt('请输入行数');
var cols = prompt('请输入列数');
// js的字符串中不能换行
document.write("<table border='1'>");
for (var i=1;i<=rows;i++) {
if (i%2==1) {//奇数行
document.write("<tr class='hd'>");
}else{
document.write("<tr>");
}
for (var j=1;j<=cols;j++) {
document.write("<td>"+i+"行"+j+"列</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
5.转换数值类型
Number
<script type="text/javascript">
// 转换成数值类型
// var result = Number('123.456');
// 真为1,假为0
// var result = Number(1<3);
var result = Number(3.1415926000000000000);
// var houdun;
// 只识别字符串
// var result = Number(houdun);
// var result = Number('0000000001.230000000000000');
// var result = Number('');
// var result = Number('后盾人');
console.log(result);
console.log(typeof result);
</script>
parseFloat
<script type="text/javascript">
// 转换为小数
// var result = parseFloat('0001.230000');
// var result = parseFloat('5');
// var result = parseFloat(5);
var result = parseFloat('后盾人');
console.log(result);
console.log(typeof result);
</script>
parselnt
<script type="text/javascript">
// parseInt将数据的整数部分提取出来
// var result = parseInt('0000123.93300000');
// var result = parseInt('66px');
// 第二个参数表示第一个参数的进制
// 将8进制的123转成十进制数字
var result = parseInt(123,8);
console.log(result);
console.log(typeof result);
</script>
isNaNAN
<script type="text/javascript">
// isNaN用来判断数据是否不能转成数字
// 不能转成数字,返回true
// 能转成数字,返回false
// var result = isNaN('后盾人');false
var result = isNaN('123');
// var result = isNaN(666);
console.log(result);
</script>
eval
<script type="text/javascript">
// eval用js语法解析字符串的内容
var str = '1+1';
var result = eval(str);
console.log(result);
</script>
使用转换数组类型进行自定义运算
<script type="text/javascript">
var x = prompt('请输入第一个数字');
var charset = prompt('请输入运算符+-*/');
var y = prompt('请输入第二个数字');
console.log(x+charset+y);
var result = eval(x+charset+y);
console.log(result);
</script>
3.语句
1.if
<script type="text/javascript">
var grade = prompt('请输入你的分数');
// 嵌套分支
// if (grade>=60) {
// if () {
//
// }
// }
// 多路分支
if (grade>=90) {
document.write("火云学神");
}else if(grade>=80){
document.write("学霸");
}else if(grade>=70){
document.write("学的还行");
}else if(grade>=60){
document.write("学痞");
}else if(grade>=30){
document.write("学渣");
}else if(grade>=10){
document.write("学渣渣");
}else{
document.write("开心就好~");
}
if(3<grade<5){
document.write('大师')
}
// 单路分支
// if (grade>=60) {
// document.write('及格了');
// }
// 双路分支
// if (grade>=60) {
// document.write('及格了');
// }else{
// document.write("不及格");
</script>
2.switch
<script type="text/javascript">
// switch如果判断成功,会执行对应的代码,以及他后面的判断,不再判断,直接执行相关代码
// case判断的时候,要求所对比的数据和待对比的值,内容和类型一样
// prompt接收到的结果是字符串类型
var gift = prompt('请输入你的奖品序号')*1;
switch(gift){
case 1:
document.write('iphone手机');
break;
case 2:
document.write("宝马汽车");
break;
case 3:
document.write("六个苹果");
break;
case 4:
document.write("一台平板电脑");
break;
default:
document.write("请认真输入");
}
</script>
3.while
<script type="text/javascript">
// while(饿){
// 吃一口
// }
// for循环一般指定具体的次数
// while循环一般不指定具体次数
// 但是,不论什么循环,一定是要有结尾的,否则就是死循环
var age = 18;
while(age<=50){
document.write(age+"岁领一万块钱<br />");
age++;
}
</script>
</head>
4.do while
<script type="text/javascript">
var age = 6;
// while(age<=50){
// document.write(age+"岁领一万块钱<br />");
// age++;
// }
// while循环是先判断后执行
// do while循环是先执行一次,然后再判断
do{
document.write(age+"岁领一万块钱<br />");
}while(age<=50)
age++;
</script>
4.函数
1.函数
var a = function(){
}
a();
2.带参数
// 创建函数时传入的没有实际值的变量叫形参
// 调用函数的时候,传入的具体值,叫实参
function pf(x){
var result = x*x;
alert(result);
}
pf(5);
pf(123);
function add(x,y){
var result = x+y;
alert(result);
}
add(123,321);
add(1,2);
3.return
1.构造函数
<script type="text/javascript">
// 构造函数(类)
function ren(){
this.name = '名字';
this.sex = '性别';
this.height = '身高';
this.weight = '体重';
this.look = function(){
alert('能看见东西');
};
this.run = function(){
alert('能跑');
};
}
ren(ren);
// 通过构造函数实例化具体对象
var xiawa = new ren();
xiawa.name = '夏娃';
document.write(xiawa.name);
xiawa.sex = '女孩';
document.write(xiawa.sex);
var yadang = new ren();
yadang.name = '亚当';
document.write(yadang.name);
// 执行对象里的方法
yadang.run();
// 追加新属性和新方法
yadang.wenshen = '两只皮皮虾';
document.write(yadang.wenshen);
yadang.tree = function(){
alert('会爬树');
}
yadang.tree();
</script>
2.遍历
<script type="text/javascript">
var auas = {
price:'8000元',
size:'15.6寸',
weight:'3kg',
color:'黑色',
game:function (){
alert('玩游戏')
},
chat:function(){
alert('聊天')
}
};
// x表示当前遍历到的属性的属性名字字符串形式,auas表示提用auas数组
for (x in auas) {
document.write(x+'=>'+auas[x]+'<br />');
}
</script>
3.删除对象属性
比如删除price
delete auas.price
5.数组
1.数组
<script type="text/javascript">
// 数组里的每一个数据都是独立的
// 数组里每个数据可以是任意合法类型
// 数组中的元素序号（下标）从0开始
// 数组是数据存储方式,其数据类型是对象object
// 隐式声明数组
// var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];
// document.write(typeof fruits);
// 通过构造函数创建数组
var fruits = new Array('苹果','鸭梨','香蕉','西瓜','桔子','葡萄');
document.write(fruits);
document.write("<br />");
// document.write(fruits[2]);
// 重新赋值数组元素
fruits[2] = '火龙果';
document.write(fruits);
</script>
2.数组特点
<script type="text/javascript">
// 数组可以先创建再赋值
// var fruits = [];
// var fruits = new Array();
// fruits[0] = '苹果';
// fruits[1] = '桔子';
var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];
// 数组长度
// document.write(fruits.length);
// 往数组最后追加元素
fruits[fruits.length] = '火龙果';
fruits[fruits.length] = '榴莲';
document.write(fruits);
</script>
3.数组遍历
<script type="text/javascript">
var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];
// 数组遍历
for (var i=0;i<fruits.length;i++) {
document.write(fruits[i]+'很好吃<br />');
}
// document.write(fruits[0]+'很好吃<br />');
// document.write(fruits[1]+'很好吃<br />');
// document.write(fruits[2]+'很好吃<br />');
// document.write(fruits[3]+'很好吃<br />');
// 写一个函数,传入一个数组,返回数组的最大值
// var arr = [1,56,23,6,43,87,3,5,55];
// var result = max(arr);
</script>
4.二维数组
<script type="text/javascript">
// 山东 北京 上海 重庆 四川
var jingdian = [
['泰山','水泊梁山','三孔','青岛海滩','大明湖'],
['天安门','天坛','长城','故宫','地坛','鸟巢'],
['城隍庙','迪士尼','外滩'],
['洪崖洞','磁器口古镇','解放碑','长江索道'],
['九寨沟','峨眉山','乐山大佛']
];
// document.write(jingdian.length);
// 取得数组
document.write(jingdian[1][2]+"<br />");
document.write(jingdian[2][0]+"<br />");
document.write(jingdian[2].length)
</script>
<script type="text/javascript">
// 山东 北京 上海 重庆 四川
var jingdian = [
['泰山','水泊梁山','三孔','青岛海滩','大明湖'],
['天安门','天坛','长城','故宫','地坛','鸟巢'],
['城隍庙','迪士尼','外滩'],
['洪崖洞','磁器口古镇','解放碑','长江索道'],
['九寨沟','峨眉山','乐山大佛']
];
// 遍历二维数组,jingdian表示数组个数
for (var i=0;i<jingdian.length;i++) {
// 循环jingdian[i]数组，jingdian[i]数组中的元素个数。
for (var j=0;j<jingdian[i].length;j++) {
document.write(jingdian[i][j]+'很好玩、');
}
document.write("<br />");
}
// document.write(jingdian[0][0]+'很好玩、');
// document.write(jingdian[0][1]+'很好玩、');
// document.write(jingdian[0][2]+'很好玩、');
// document.write(jingdian[0][3]+'很好玩、');
// document.write(jingdian[0][4]+'很好玩、');
// document.write(jingdian[1][0]+'很好玩、');
// document.write(jingdian[1][1]+'很好玩、');
// document.write(jingdian[1][2]+'很好玩、');
// document.write(jingdian[1][3]+'很好玩、');
// document.write(jingdian[1][4]+'很好玩、');
</script>
5,取数组最大值
<script type="text/javascript">
function max(ar){
// arr[0]表示从数组第一个数开始
var x = ar[0];
// 循环数组
for (var i=1;i<ar.length;i++) {
// 如果arr[i]大于x,就让x存储arr[i]
// if (i>x) {
if (ar[i]>x){
x = ar[i];
}
}
return x;
}
// 这是外部的arr，不能调用函数里面的对象
// var arr =
// var resut = max(arr)
var sz = [1,56,213,6,43,87,3,5,55];
var result = max(sz);
document.write(result);
</script>
6.去最长二维数组
<script type="text/javascript">
function max(arr){
var x = 0;//x用来存储长度最长的子数组序号
for (var i=0;i<arr.length;i++) {
if (arr[i].length>arr[x].length) {
x = i;
}
}
return x;
}
var jingdian = [
// ['泰山','水泊梁山','三孔','青岛海滩','大明湖'],
// ['天安门','天坛','长城','故宫','地坛','鸟巢'],
// ['城隍庙','迪士尼','外滩',1,1,1,1,1],
// ['洪崖洞','磁器口古镇','解放碑','长江索道'],
// ['九寨沟','峨眉山','乐山大佛'],
[1,1,1,11,1,1],
[1,1,1,1,11,1,1,1,1],
[1,1,1,1]
];
var result = max(jingdian);
document.write(result);
</script>
6.字符串
1.字符串类型
<script type="text/javascript">
//
var arr = [1,2,3];
// 对象构造函数,会输出function Array() {[native code]},Array
document.write(arr.constructor);
// var url = '后盾人www.houdunren.com';
字符串长度
// document.write(url.length);
获取对象位置字符
// document.write(url[7]);
// document.write(url.constructor);
// 获得4号位置上的字符
// var result = url.charAt(4);
// 获得4号位置上字符的Unicode编码，计算机识别字符的编码
// var result = url.charCodeAt(4);
// 将Unicode编码转成原始字符
// var result = String.fromCharCode(119);
var str = 'www.houdunren.com';
// 获得ou在字符串中首次出现的位置
// var result = str.indexOf('ou');
// var result = str.indexOf('u');
// 获得u在字符串中最后一次出现的位置
var result = str.lastIndexOf('u');
document.write(result);
</script>
2.字符串对象
match
<script type="text/javascript">
var str = 'www.houdunren.com';
// 如果能搜索到,返回搜搜索的内容
// 如果没有搜索到,返回null
var result = str.match('un');
if(result){
document.write("搜索到了");
}else{
document.write("没有搜索到");
}
</script>
repalace,替换
只能替换一个
<script type="text/javascript">
var str = '1113234111，123213111';
// replace 只替换搜多到的第一个字符串
var result = str.replace('111','***');
var result = str.replace('111','***');
document.write(result);
</script>
替换所有
<script type="text/javascript">
var str = '1113234111，123213111';
// while(字符串中有后盾人){
// 将第一个后盾人替换成***
// }
while(str.match('111')){
str = str.replace('111','***');
}
document.write(str);
</script>
还可以用if语句
<script type="text/javascript">
var str = '后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服';
for(a=0;a<100;a++){
if(str.match('后盾人')){
str = str.replace('后盾人','***');
}
}
document.write(str);
</script>
slice
<script type="text/javascript">
var str = 'houdunren.com';
// 截取字符
// var result = str.slice(3,6);
// 从3号开始,截取3个字符
var result = str.substr(3,3);
document.write(result);
</script>
split
<script type="text/javascript">
var str = '后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服';
// 将字符串转换成数组
var result = str.split('盾');
document.write(result);
</script>
大小写转换
<script type="text/javascript">
var str = 'HouDunRen';
// 大小写的转换
document.write(str.toLowerCase());
document.write(str.toUpperCase());
</script>
查询位置
<script type="text/javascript">
var str = '后盾人视频下载地址:www.houdunren.com,线下实战：www.houdunwang.com，在线学习平台：www.houdunren.com';
// while(字符串中有houdun){
// 获得houdun第一次出现的位置,并存储
// 将第一次出现的houdun替换成等长的其他字符
// }
var result = [];
while(str.match('houdun')){
// 查找houdun第一次出现的位置
var index = str.indexOf('houdun');
// 将houdun第一次出现的位置存储
result.push(index);
// 将第一个houdun替换成其他字符
str = str.replace('houdun','*******');
}
// 不更改字符的方法
var str = '后盾人视频下载地址:www.houdunren.com,线下实战：www.houdunwang.com，在线学习平台：www.houdunren.com';
document.write(result);
document.write(str);
</script>
7.随机数
1.数字对象
<script type="text/javascript">
// 取绝对值
// var result = Math.abs(6);
// 四舍五入(结果是整数)
// var result = Math.round(2.49);
// var result = Math.round(2.5);
// 向上取整
// 整数向上向下取整结果都是他本身
// 向上
// var result = Math.ceil(5.1);6
// 向下
// var result = Math.floor(5.1);5
// var result = Math.floor(6.9);6
document.write(result);
2.随机数
<script type="text/javascript">
// 取0-1之间的随机数
// 取值范围是无限接近于0和1
// var result = Math.random();
// 取0-5之间的随机数
// var result = Math.random()*5;
// 取10-15之间的随机数
// var result = Math.random()*(15-10)+10;
// 取x-y之间的随机数
// Math.random()*(y-x)+x;
// var result = Math.random()*(26-11)+11;
// var result = Math.round(Math.random()*(15-10)+10);
// 取10-15之间的随机整数(可以取到10和15)
// var result = Math.floor(Math.random()*(16-10)+10);
// 取x-y之间的随机整数(可以取到x和y)
// Math.floor(Math.random()*(y+1-x)+x);
var result = Math.floor(Math.random()*(49+1-22)+22);
document.write(result);
</script>
3.随机点菜
<script type="text/javascript">
// 3/将随机下标对应的数组元素输出
// 1/将菜名写到数组中
// 2/随机数组下标
var cai = ['土豆丝','油焖大虾','麻婆豆腐','宫保鸡丁','佛跳墙','重庆火锅','北京烤鸭'];
var x = Math.floor(Math.random()*(cai.length-1+1-0)+0);
document.write("今天中午吃："+cai[x]);
</script>
<script type="text/javascript">
var cai = ['土豆丝','油焖大虾','麻婆豆腐','宫保鸡丁','佛跳墙','重庆火锅','北京烤鸭'];
var y = Math.random()*10;
if (y<8) {
document.write("今天中午吃："+cai[0]);
}else{
var x = Math.floor(Math.random()*(cai.length-1+1-0)+0);
document.write("今天中午吃："+cai[x]);
}
</script>
8.未分类知识
1.BMO
<script type="text/javascript">
// window对象下直接的方法和属性,在调用的时候不用加window
// alert('后盾人');
// 全局变量和自定义函数,都属于window对象的属性和方法
// var hd = '后盾人';
// document.write(window.hd);
function foo(x){
return x*x;
}
document.write(window.foo(4));
</script>
2.confirm
<script type="text/javascript">
// window对象下直接的方法和属性,在调用的时候不用加window
// alert('后盾人');
// 全局变量和自定义函数,都属于window对象的属性和方法
// var hd = '后盾人';
// document.write(window.hd);
function foo(x){
return x*x;
}
document.write(window.foo(4));
</script>
9.定时器
<script type="text/javascript">
function foo(){
alert('后盾人');
}
// foo();
// 每隔2000毫秒,执行一次foo函数
// 类似于闹铃,每隔24小时执行一次
// setInterval(foo,2000);
// 定时炸弹
// 3000毫秒后,执行一次foo函数
// setTimeout(foo,3000);
// 定时器两种传参写法
// setInterval(function(){
// alert('hahahha');
// },2000)
</script>
<script type="text/javascript">
var timer = setInterval(function(){
alert('后盾人');
},2000)
// document.write("后盾人-----");
setTimeout(function(){
// 清理定时器
clearInterval(timer);
},5000);
</script>
10.事件
<script type="text/javascript">
// document.getElementById('dog').onclick = function(){
// alert('汪汪汪~~~');
// }
</script>
<script type="text/javascript">
function foo(){
alert('汪汪汪~~~~');
}
</script>
</head>
<body>
<!--通过html标签绑定事件-->
<img src="jinmao.jpg" id="dog" onclick="foo()" />
</body>
3.获得和设置行内样式
<style>
*{
padding:0;
margin: 0;
}
#btn{
margin: 20px;
}
#hd{
height: 200px;
background: mediumpurple;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
var hd = document.getElementById("hd");
// 给按钮加单击事件
btn.onclick = function(){
// 获得元素的行内样式
// var w = hd.style.width;
// alert(w);
// 设置行内样式
// hd.style.width = '400px';
var ml = hd.style.marginLeft;
alert(ml);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点我啊" />
<br /><br />
<div id="hd" style="width: 300px;margin-left: 20px;"></div>
</body>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
