<body>
<style>
.a{
width: 200px;
height: 1000px;
background: yellow;
}
div{
cursor: pointer;
}
</style>
<div class="a">js练习</div>
<div id="b">b</div>
<input type="text" name="user">
<a href="https://www.baidu.com"></a>
<div onclick="alert('反应')">js点击反应，直接在元素里写函数</div>
<div onclick="fnclic()">js点击反应，直接在元素里调用函数</div>
<ul>
<li></li>
</ul>
<script>
//1. 获取元素 的几种方式
// document.querySelector('.class');
// document.getElementById('id'); 根据id值获取
// document.getElementsByClassName('a')[0]; 根据类名获取
// document.getElementsByName('user')[0]; 根据属性name获取
// document.getElementsByTagName('div')[1] 根据元素获取
//3. 读写内容 及元素当文本输出
let obox = document.querySelector('.a');
// document.title = '3' + obox.innerHTML; //读写内容
// obox.innerHTML = "3.JS exercise questions"; 写内容
// obox.innerText = '<a>3.JS exercise questions</a>' 元素以文本方式输出
//4. 读取a元素的href(读取属性)
let a = document.getElementsByTagName('a')[0];
// document.title = '4.' + a.getAttribute('href');
//5. 跳转li元素的父级(跳转父级)
let li = document.getElementsByTagName("li")[0];
// console.log(li.parentNode);
//6. 类名操作 覆盖类名 添加类名 类名移出 切换类名
let oclas = document.querySelector('.a');
// oclas.className = 'clas';
// oclas.classList.add('clas');
// oclas.classList.remove('clas')
// oclas.classList.toggle('clas')
//7. 变量定义的三种方式 及那种字符串方式下使用变量
// var 变量跟内容可以重新定义
// let 变量不能重新定义
// const 变量跟内容都不可被重新定义
//8. 用两种方式取出'心肠不坏'
let list = [3, 8, {"八戒": "心肠不坏"}]
// document.title = '8.1' + list[2].八戒;
// document.title = '8.2' + list[2]['八戒'];
//9. 逻辑运算符 或且非
// || && !
//TODO条件
//10. 嵌套(重大到小)、独立分段、重复分段、数目运算 判断age少早中晚年 18 30 60
let age = 22;
// 嵌套
// if(age>60){
// console.log("晚年");
// }else{
// if(age>30){
// console.log('中年');
// }else{
// if(age>18){
// console.log('早年');
// }else{
// console.log('少年');
// }
// }
// }
// 独立分段
// if(age>0 && age<18) console.log('少年');
// if(age>=18 && age<30) console.log('早年');
// if(age>=30 && age<60) console.log('中年');
// if(age>=60) console.log('晚年');
// 重复分段
// if(age<18) console.log('少年');
// else if(age<30) console.log('早年');
// else if(age<60) console.log('中年');
// else console.log('晚年');
// 数目分段
// let ss = age<60 ?age<30 ?age<18 ?'少年' :'早年' :'中年' :'晚年';
//TODOfor
//11. 写出for满足条件 退出和继续执行方法
// break continue
//12. for语法
var list01 = ['蒙娜丽莎','最后的晚餐','神曲']
// for(o=0;o<list01.length;o++) console.log('12.' + list01[o]);
//13. 使用forin遍历里面数组和json ,forof遍历里面数组，forEach遍历数组
let list02 = [{"数组": [9, 8, 7, 6, 101]}, {"灵禅子": "唐玄宗","斗战圣佛": "孙悟空","天蓬元帅": "猪八戒"}];
// for(let item in list02[0].数组){
// console.log(list02[0].数组[item]);
// }
// for(let item in list02[1]){
// console.log(item,':',list02[1][`${item}`]);
// }
// for(let item of list02[0].数组){
// console.log(item);
// }
// list02[0].数组.forEach((item,index,arr)=>console.log(item));
//TODO函数
//14. 普通函数语法(使用展开符传参)
// function parameter(...arr){
// arr.forEach((item)=>console.log('14.' + item))
// }
// parameter(1,9,2,8,3,7)
//15. 匿名函数语法
// let anonymity = function(){console.log("15.匿名函数")}
// anonymity()
//16. 立即执行函数各种语法
// !function(){
// console.log('16.立即执行函数');
// }()
//17. 箭头函数语法(传多个参,将参数打印控制台)
// let arrow = (...arr)=>{
// arr.forEach((item)=>console.log('17.' + item))
// }
// arrow('a','b','c','d')
//18. 闭包函数写法
// let closure = function(){
// return {'打野':'李白',"法师":"妲己","辅助":"蔡文姬","对抗路":"吕布","发育路":"鲁班"}
// }
// console.log('18.' + closure().对抗路);
//19. 递归函数写法
//55累加到60 (345)
// function recursion(n){
// if(n===60) return 60;
// return n + recursion(n+1);
// }
// console.log(recursion(50));
//50累减5 (285)
// function recursion(n){
// if(n===45) return 45;
// return n + recursion(n-1);
// }
// console.log(recursion(50))
//20. 回调函数写法 一部手机打85折后再优惠100元,最终成交价格 (6699)
let phone = 7999;
// function apple(phone,fn){
// let price = phone * 0.85;
// return fn(price)
// }
// let last_price = apple(phone,n=>n=n-100);
// document.title = '20.' + '最终成交价格:' + last_price;
//21. 构造函数写法
// function constructor(){
// this.number = 999;
// this.skill = '火眼金睛';
// }
// let cunst = new constructor();
// document.title = '21.' + cunst.skill;
//22. 运算自增 a++ ++a的意思
//23. 将str倒转打印控制台
let str = "山上虎";
// document.title = '23.' str.split('').reverse().join('');
//24. 查看数据类型(精确版)
var str01 = "煮豆燃豆萁，豆在釜中泣。";
// document.title = '24.' + Object.prototype.toString.call(str01);
//25. 查看数据类型(常用版)
var str02 = "煮豆燃豆萁，豆在釜中泣。";
// document.title = '25.' + typeof str02;
//TODO字符串的操作
//26. 构造字符串
let strs = new String('js练习');
// document.title = '26.' + strs;
//27. 拆分字符(将百战不已拆除)
let str03 = "知己知彼百战不已";
// document.title = '27.' + str03.split('百战不已')[0]
//28. 合并字符(将百战百胜接拼到str04上)
let str04 = '知己知彼';
// document.title = '28.' + str04.concat('百战百胜');
//29. 查看str05"不"的下标
let str05 = "知己知彼百战不已";
// document.title = '29.' + str05.includes('不');
//30. 查看str06有无"百"
let str06 = "知己知彼百战不已"
// document.title = '30.' + str06.includes('百');
//31. 用下标的方法获str07中的"百战百胜"
let str07 = "知己知彼百战百胜"
// document.title = '31.' + str07.substring(4,8);
//32. 用下标取长度的方法获取"明日何其多"
let str08 = "明日复明日明日何其多，我生待明日万事成蹉跎。"
// console.log('32.' + str08.substr(5,5));
//33. 将“不已”替换为"百胜"(两种方法)
let str09 = "知己知彼百战不已";
// document.title = '33.1' + str09.split('不已').join('百胜');
// document.title = '33.2' + str09.replace('不已','百胜');
//34. 清空两侧空格
let str10 = " 体迅飞凫飘忽若神 ";
// document.title = '34.' + str10.trim();
//35. 合并字符串
let str11 = '《孙子兵法》';
let str12 = "----孙膑";
// document.title = '35.' + str11.concat(str12);
//TODO数值的操作
//36. 构造一个数值
let num01 = new Number('999');
// document.title = '36.' + Object.prototype.toString.call(num01);
//37. 将数值转化为字符串
let num02 = 99;
// document.title = '37.' + String(num02);
//38. 将数值精确到小数点后两位
let num03 = 99.79999;
// document.title = '38.' + num03.toFixed(2);
//39. 将数值转化为整形
let num04 = 99.99;
// document.title = '39.' + parseInt(num04);
//40. 将数值转化为浮点数
let num05 = '99.99';
// document.title = '40.' + parseFloat(num05);
//TODO数学Math
//41. 向上取整(有浮点数进1)
// document.title = '41.' + Math.ceil(99.1);
//42. 向下取整
// document.title = '42.' + Math.floor(99.9);
//43. 取绝对值
// document.title = '43.' + Math.abs(-88);
//44. 四舍五入(满5进1)
// document.title = '44.' + Math.round(99.5);
//45. 取最大值
// document.title = '45.' + Math.max(33,79,66);
//46. 取最小值
// document.title = '46.' + Math.min(9,18,27,36,5,25);
//47. 2的3次方
// document.title = '47.' + Math.pow(2,3);
//48. 9的开方
// document.title = '48.' + Math.sqrt(9);
//49. 随机生成一个小于20的数
// document.title = '49.' + parseInt(Math.random() * 20);
//TODO数组的操作
let arr01 = [0, 1, 2, 3, 4];
let arr02 = [7, 8, 9, 10];
//50. 接拼数组(arr02接拼到arr01里)
// document.title = '50.' + arr01.concat(arr02);
//51. arr02从后面添加11
// arr02.push(11)
//52. arr02从前面添加6
// arr02.unshift(6);
//53. 查看arr01中5的索引
// document.title = '53.' + arr01.indexOf(5);
//54. 查找arr01中有无6
// document.title = '54.' + arr01.includes(6);
//55. 将arr02以-拼接起来
// document.title = arr02.join('-');
//56. 将arr03里的6移动到arr04里
let arr03 = [1,2,3,4,5,6,6,6,6,6,6,6,6,7,8]
let arr04 = [];
// arr04.push(arr03.splice(5,8)) //splice删除索引为5长度为8 for里配合splice删除时，for要倒着遍历
//TODO弹框
//57. 普通弹框
// alert("57. 普通弹框")
//58. 确认内容弹框(思考确定与返回值)
// document.title = '58.' + confirm('目前练习js');
//59. 提示弹框
// document.title = '59.' + prompt("现在几点钟:");
//TODO刷新
//60. 普通页面刷新
// window.location.reload();
//61. 强制页面刷新
// window.location.reload(true);
//TODO网址
//62. 打印当前全部网址信息
// console.log(window.location);
//63. 打印当前网址
// console.log(window.location.href);
//TODO窗口
//64. 打开窗口
// window.open("index.html")
//65. 关闭窗口
// window.close('index.html');
//TODO滚动
//66. 滚动到指定位置(不能单独使用)
// function fn01(){
// window.scrollTo(0,1000)
// }
// setTimeout(fn01,2000)
//TODO定时器
//67. 反复调用定时器传两个参数两种写法,关闭反复调用定时器
// setInterval(fn,1000,v1,v2);
// clearInterval(fn)
//68. 只调用一次定时器传两个参数两种写法,关只调用一次定时器
// setTimeout(fn,1000,v1,v2);
// clearTimeout(fn)
//69. 获取盒子相对距离
// box.offsetLeft
//TODO缓存
//70. 设置某项缓存(将hero和'key'设置为缓存)
let hero = {"打野":'孙悟空','法师':'安琪拉'}
let key = '燕赤霞';
//localStorage.setItem('hero_list',JSON.stringify(hero));
//localStorage.setItem("key",key);
//71. 移除 'key' 缓存值
// localStorage.removeItem(key')
//72. 获取'hero'缓存,并解压为json格式
// document.title = '72.' + JSON.parse(localStorage.getItem('hero_list')).法师;
//73. 清空所有缓存
// localStorage.clear();
//74. 查看缓存
// console.log(localStorage);
//TODO事件
//75. 窗口缩放
// window.onresize = ()=>console.log('窗口缩放反应');
//76. 窗口发生滚动或盒子里发生滚动
// window.onscroll = ()=>console.log('滚动有反应');
//77. 鼠标移动盒子上发生事件
let boxx = document.querySelector('.a');
// boxx.onmouseover = ()=> document.title = '77.' + '发生反应';
//78. 输入框键盘松动发生事件
let oinput = document.getElementsByName('user')[0];
// oinput.onkeyup = ()=> document.title = "78." + '键盘松动了';
//TODO常用方法的使用
//79. filter过滤器 过滤出arr05中大于6的数,也使用filter删除arr05中的6
let arr05 = [2,4,6,8,6,610];
//arr05 = arr05.filter((item)=>item <= 6) //过滤
//arr05 = arr05.filter(a=>a!==6); //删除
//80. some一真即真 (使用some判断arr06是否有r){购物车用于判断缓存有当前商品缓存没;没有设置,有累加}
let arr06 = ['a','b','e','r','y'];
// document.title = '80.' + arr06.some(item=>item==='r');
//81. map返回处理好的数据 (使用map将arr07中的数加5)
let arr07 = [1,2,3,4,5]
// document.title = '81.' + arr07.map(a=>a+5);
//82. findIndex返回查找元素索引
let arr08 = ['a','b','c','d']
// document.title = '82.' + arr08.findIndex(a=>a=='c');
//TODO正则表达式,test返回布尔值
let arr09 = {phone:'19982380995',user:'BaBQ~',chines:"中国文化博大精深",http:'https://www.baidu.com'};
//83. 电话号码 以1开头 大于3的数为第二位 其余在匹配9位0-9的数后结尾
// document.title = '83.' + /^1[3,9]\d{9}$/.test(arr09.phone);
//84. 用户名 以任意数字或字母或符号开头,匹配4到10位后结束，并忽略大小写
// document.title = '84.' + /^[a-z0-9~]{4,10}$/i.test(arr09.user);
//85. 匹配中文 匹配6到16位 ^外用匹配开始 ^内用取反
// document.title = '85.' + /^[^a-z0-9]{6,16}$/i.test(arr09.chines);
//86. 匹配网址 ?可有可无 +至少一位 ()数组
// document.title = '86.' + /^https?:\/\/[a-z0-9]+.[a-z0-9]+.(com|cn|net)$/.test(arr09.http);
//TODO类
//87. NOde类 语法实例化 静态 调用
// class Clas{
// constructor(){ //实例化区域
// this.number = 9999;
// }
// static cll_phone(name){ #静态方法不能传实例化的参数
// console.log(`${name}-正在打电话`);
// }
// phone_number(){
// console.log(`我的电话是${this.number}`);
// }
// }
// Clas.cll_phone('张三')
// let newclas = new Clas();
// newclas.number = '11001'; //赋值给实例化区域
// newclas.phone_number();
</script>
</body>
09-22
220
220
12-02
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
