1. 慕课js入门-4-1编程挑战
编程挑战
小伙伴们,请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数,点击相应按钮执行相应操作,点击"取消设置"按钮后,提示是否取消设置,如是执行操作,否则不做操作。
任务
一、定义"改变颜色"的函数
提示:
obj.style.color
obj.style.backgroundColor
二、定义"改变宽高"的函数
提示:
obj.style.width
obj.style.height
三、定义"隐藏内容"的函数
提示:
obj.style.display="none";
四、定义"显示内容"的函数
提示:
obj.style.display="block";
五、定义"取消设置"的函数
提示:
使用confirm()确定框,来确认是否取消设置。
如是将以上所有的设置恢复原始值,否则不做操作。
六、当点击相应按钮,执行相应操作,为按钮添加相应事件
代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <title>javascript</title> <style type="text/css"> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;} p{ line-height:18px; text-indent:2em;} </style> </head> <body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮,执行相应操作,为按钮添加相应事件--> <input type="button" value="改变颜色" onclick="changeColor()" > <input type="button" value="改变宽高" onclick="changeWid()"> <input type="button" value="隐藏内容" onclick="hidCon()" > <input type="button" value="显示内容" onclick="showCon()" > <input type="button" value="取消设置" onclick="changeSet()" > </form> <script type="text/javascript"> //定义"改变颜色"的函数 function changeColor(){ var mysty=document.getElementById('txt'); mysty.style.color="blue"; mysty.style.backgroundColor="red"; } //定义"改变宽高"的函数 function changeWid(){ var mysty=document.getElementById('txt'); mysty.style.width=800; mysty.style.height=800; } //定义"隐藏内容"的函数 function hidCon(){ var mysty=document.getElementById('txt'); mysty.style.display="none"; } //定义"显示内容"的函数 function showCon(){ var mysty=document.getElementById('txt'); mysty.style.display="block"; } //定义"取消设置"的函数 function changeSet(){ var mysty=confirm("你要改变么?"); if (mysty) { x=document.getElementById("txt") x.removeAttribute("style"); } }
//object.removeAttribute可以移除效果而不改变原来css的样式
</script>
</body>
</html>
2.慕课js入门-2-编程练习20180508
编程练习
制作新按钮,“新窗口打开网站” ,点击打开新窗口。
任务
1、新窗口打开时弹出确认框,是否打开
提示: 使用 if 判断确认框是否点击了确定,如点击弹出输入对话框,否则没有任何操作。
2、通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/
3、打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function openWindow() { // 新窗口打开时弹出确认框,是否打开 var judge=confirm("是否打开网页?"); if(judge){ // 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/ var Wopen=prompt("请输入要打开的网址","http://imooc.com/"); window.open=(Wopen,"_blank","width=400,height=500",menubar=no,toolbar=no); } //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏 </script> </head> <body> <input type="button" value="打开新窗口" onclick="openWindow()" > </body> </html>
3.慕课js进阶-7编程练习20180511
编程练习
某班的成绩出来了,现在老师要把班级的成绩打印出来。
格式要求:
1、显示打印的日期。 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间。
2、计算出该班级的平均分(保留整数)。
同学成绩数据如下:
"小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"
<!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>系好安全带,准备启航</title> <script type="text/javascript"> //通过javascript的日期对象来得到当前的日期,并输出。 var mydata=new Date(); var myyear=mydata.getFullYear(); var mymonth=mydata.getMonth()+1; var myday=mydata.getDate(); var myweek=mydata.getDay(); var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'] //成绩是一长窜的字符串不好处理,找规律后分割放到数组里更好操作哦 var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"; var score=scoreStr.toLocaleString(); var sum=0,num=parseInt(score.length/6),people=0; for (var i=0;i<=num;i++){ people=(parseInt(score[3+6*i])*10+parseInt(score[4+6*i])); sum=sum+people; } var aver=Math.floor(sum/(num+1)); //从数组中将成绩撮出来,然后求和取整,并输出。 document.write(myyear+'年'+mymonth+'月'+myday+'日'+' '+week[myweek]+'--'+'班级总分为:'+aver); </script> </head> <body> </body> </html>
4.慕课js进阶-6编程练习20180510
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
<!DOCTYPE html> <html> <head> <title> 事件</title> <script type="text/javascript"> function count(){ //获取第一个输入框的值 var txt1=parseInt(document.getElementById('txt1').value); //获取第二个输入框的值 var txt2=parseInt(document.getElementById('txt2').value); //获取选择框的值 var select=document.getElementById('select').value; //获取通过下拉框来选择的值来改变加减乘除的运算法则 var sum=''; switch(select){ case'+': sum=txt1+txt2; break; case'-': sum=txt1-txt2; break; case'*': sum=txt1*txt2; break; case'/': sum=txt1/txt2; break; default: break; } //设置结果输入框的值 document.getElementById('fruit').value=sum; } </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>