JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36959
免费课程
                                
JavaScript入门篇 
入门·738112
免费课程
                                
                难度入门
            
                时长 8小时55分
            
                学习人数
            
综合评分9.47
                            2557人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

聆厛彼岸花开0

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");

// 任务1
for(var i=0;i<hobby.length;i++){
hobby[i].checked=true;
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");

// 任务2
for(var i=0;i<hobby.length;i++){
hobby[i].checked=false;
}
}

function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementsByName("hobby");
// 任务3
if(j<1 || j>6){
alert("序号为1-6,请重新输入")
}else{
if(hobby[parseInt(j)-1].checked == false){
hobby[parseInt(j)-1].checked=true;
}

}
}

</script>
</body>
</html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2024-03-06
聆厛彼岸花开0

<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>

<h1>操作成功</h1>
<span id="time">5</span>
<span>秒后回到主页</span>
<a href="javascript:back()">返回</a>
<script type="text/javascript">
//获取显示秒数的元素，通过定时器来更改秒数。
var num=document.getElementById("time").innerHTML;
function count(){
if(num>0){
num--;
document.getElementById("time").innerHTML=num;
}else if(num == 0){
location.assign("https://www.imooc.com")
}
}
function back(){
window.history.go(-1);
}
setInterval("count()",1000)
//通过window的location和history对象来控制网页的跳转。

</script>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2024-03-06
聆厛彼岸花开0

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">

//通过javascript的日期对象来得到当前的日期，并输出。
var date=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var myDate=date.getFullYear()+"年"+(date.getMonth() + 1)+"月"+date.getDate()+'日 '+ weekday[date.getDay()];
document.write(myDate + '<br/>');
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var achie=scoreStr.split(";");
document.write(achie);
//从数组中将成绩撮出来，然后求和取整，并输出。
var num=0;
for(var i=0;i<achie.length;i++){
num+=Number(achie[i].split(":")[1])
}
document.write('<br/>'+"总分:"+num );
document.write('<br/>'+"平均分:"+Math.round(num/achie.length));
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2024-03-04
聆厛彼岸花开0

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Math </title>
<script type="text/javascript">
window.onload=function(){
var b = document.getElementsByTagName('button')[0];
b.onclick = function(){
for(var arr=[],i=0;i<10;i++){
arr[i] = Math.round(Math.random()*9);
}
document.getElementsByTagName('div')[0].innerHTML = arr.join('-');
}
}
</script>
</head>
<body>
<button>随机10个</button>
<div></div>
</body>
</html>

查看全部

0 采集收起来源：随机数 random()
2024-03-04
聆厛彼岸花开0

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//获取第一个输入框的值
var text1=document.getElementById("txt1").value;
//获取第二个输入框的值
var text2=document.getElementById("txt2").value;
//获取选择框的值
var text3=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var result;
switch(text3){
case "+":
result=parseFloat(text1) +parseFloat(text2);
break;
case "-":
result=parseFloat(text1) -parseFloat(text2);
break;
case "*":
result=parseFloat(text1) *parseFloat(text2);
break;
case "/":
result=parseFloat(text1) /parseFloat(text2);
break;
}
//设置结果输入框的值
document.getElementById("fruit").value=result;
console.log(result);
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick=count() /> 
<input type='text' id='fruit' />
</body>
</html>

查看全部

0 采集收起来源：编程练习
2024-03-04
聆厛彼岸花开0

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
var value=document.getElementById("ids");
value.style.backgroundColor="red";
}
function message1(){
var value=document.getElementById("ids");
value.removeAttribute("style");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form >
<select name="career" onfocus="message()" onblur="message1()" id="ids">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>

查看全部

0 采集收起来源：光标聚焦事件（onfocus）
2024-03-04
聆厛彼岸花开0

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组</title>
<script type="text/javascript">
//创建数组
var myArr=['*','##',"***","&&","****","##*"];
myArr[7]="**";
//显示数组长度
// alert(myArr.length);
var arrL=myArr.length;

// 去掉没有‘*’的数据
for(var i=0; i<arrL;i++){
if(myArr[i]!= undefined){
var newArr=myArr[i];
var newLength=newArr.length;
for(var j=0;j<newLength;j++){
if(newArr[j] != '*'){
myArr.splice(i,1);
break;
}
}
}
}

//按照字符数排序
myArr.sort(function(a, b){
if(a.length>b.length){
return 1
}else if(a.length<b.length){
return -1
}else{
return 0
}
})
// var newArr=new Array;
// for(var z=0;z<arrL;z++){
// if(myArr[z]!=undefined){
// if(myArr[z].indexOf('*') != -1){
// newArr=[...newArr,myArr[z]];
// var newLength = newArr.length;
// document.write(newArr,newLength+'<br/>');
// for(var i=0;i<newLength.length;i++){

// }
// }
// }
// }
//将数组内容输出，完成达到的效果。
for(var i=0;i<myArr.length;i++){
if(myArr[i]!=undefined){
document.write(myArr[i]+'<br/>');
}
}

</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2024-02-29
weixin_慕丝1240363

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++){
if(hobby[i].type=="checkbox"){
hobby[i].checked=true; }
else{}
}
// 任务1

}

function clearall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++){
if(hobby[i].type=="checkbox"){
hobby[i].checked=false; }
else{}
}
// 任务2

}

function checkone(){
var j=parseInt(document.getElementById("wb").value);
var hobby = document.getElementsByTagName("input");
hobby[(j-1)].checked=true;
// 任务3

}

</script>
</body>
</html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2024-02-16
weixin_慕丝1240363

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(i=0;i<6;i++) {
if(hobby[i].type=="checkbox"){
hobby[i].checked=true;
}
else{}
}
// 任务1

}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(i=0;i<6;i++) {
hobby[i].checked=false;
}
// 任务2

}

function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementsByName("hobby");
hobby[j-1].checked=true;
// 任务3

}

</script>
</body>
</html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2024-01-05
superman4892475

鼠标单击事件 (onclick=" ");
鼠标经过事件 (onmouseover=" ");
鼠标移开事件 (onmouseout=" ");
光标聚焦事件 (onfocus=" ");
失焦事件 (onblur=" ");
内容选中事件 (onselect=" ");
文本框内容改变事件 (onchange=" ");
加载事件 (onload=" ");
卸载事件 (onunload=" ").

查看全部

0 采集收起来源：什么是事件
2024-01-05
sudoRam
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){

//获取第一个输入框的值
var var1 = document.getElementById("txt1").value;
//获取第二个输入框的值
var var2 = document.getElementById("txt2").value;

if (var1 == '' || var1 == null) {
alert('请输入第一个值。');
return false;
}
if (var2 == '' || var2 == null) {
alert('请输入第二个值。');
return false;
}

var1 = parseFloat(var1);
var2 = parseFloat(var2);

//获取选择框的值
var sel = document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var result;
switch (sel) {
case '+':
result = var1 + var2;
break;
case '-':
result = var1 - var2;
break;
case '*':
result = var1 * var2;
break;
case '/':
result = var1 / var2;
break;
default :
console.log(result);
}
//设置结果输入框的值
document.getElementById('fruit').value = result;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/> 
<input type='text' id='fruit' />
</body>
</html>
查看全部

0 采集收起来源：编程练习
2024-01-05
superman4892475

JavaScript数组的length属性是可变的，这一点需要特别注意。

查看全部

0 采集收起来源：了解成员数量(数组属性length)
2024-01-04
weixin_慕丝1240363

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">
var a=new Date();
var day=["日","一","二","三","四","五","六"]
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var str = scoreStr.split(";");
var score=new Array();
var t = 0;
for(x=0;x<10;x++){
score[x] = (str[x].substr(3));
t = parseInt(score[x])+t;
}
document.write(a.getFullYear()+"年"+(a.getMonth()+1)+"月"+a.getDate()+"日"+" "+"星期"+day[a.getDay()]+"--班级总分为:"+t/x);
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2023-12-28
Chris_xyf

JS必备秘籍：https://interview.dog?source=muke

查看全部

0 采集收起来源：让你认识JS
2023-12-23
weixin_慕丝1240363

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
var a = document.getElementById("txt1").value;
//获取第一个输入框的值
var b = document.getElementById("txt2").value;
//获取第二个输入框的值
var c = document.getElementById("select").value;
var d;
//获取选择框的值
switch (c){
case "+":
document.getElementById("fruit").value = parseInt(a)+parseInt(b);
break;
case "-":
document.getElementById("fruit").value = parseInt(a)-parseInt(b);
break;
case "*":
document.getElementById("fruit").value = parseInt(a)*parseInt(b);
break;
case "/":
document.getElementById("fruit").value = parseInt(a)/parseInt(b);
break;
}
//获取通过下拉框来选择的值来改变加减乘除的运算法则
//设置结果输入框的值

}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick='count()'/> 
<input type='text' id='fruit' />
</body>
</html>

查看全部

0 采集收起来源：编程练习
2023-12-20

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇