百度前端技术学院task13源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>

<label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>

<div>您输入的值是:<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">

(function() {
/*
在注释下方写下代码
给按钮button绑定一个点击事件
在事件处理函数中
获取aqi-input输入的值,并显示在aqi-display中
*/

var btn1=document.getElementById(‘aqi-input‘);
var btn2=document.getElementById(‘aqi-display‘);
var btn3=document.getElementById(‘button‘);
btn3.addEventListener(‘click‘,function(){
if (btn1.value)
{
btn2.innerHTML=btn1.value;
}
else{
btn2.innerHTML=‘尚无录入‘;
}

},false);

})();

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

时间: 2024-10-10 10:14:16

百度前端技术学院task13源代码的相关文章

百度前端技术学院task35源代码——听指令的小方块3

任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当textarea发生上下滚动时,代码行数列同步滚动 能够判断指令是否合法,不合法的指令给出提示(如图) 点击执行时,依次逐条执行所有命令 对于GO,TRA以及MOV指令增加可以移动格子数量的参数,例如 GO 3:向当前方向前进三格 TRA TOP 2:向屏幕上方平移两格 MOV RIG 4:方向转向屏幕右侧

百度前端技术学院-task1.3源代码

因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Task1-3</title> <link rel="shortcut icon" href="/sjq_ico.png" /> <style

百度前端技术学院任务-01

这两天发现了一个很不错的学习前端的地方:百度前端技术学院. 里面有不同类型的任务,任务之间的难度是递增的,很适合作为练习. 下面是任务-01的代码(并没有涉及到CSS): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度前端技术学院任务-01</title> </head> <bod

百度前端技术学院task1.10

任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终

百度前端技术学院task1.12

任务十二:学习CSS 3的新特性 面向人群: 初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

百度前端技术学院task1.9

任务九:使用HTML/CSS实现一个复杂页面 面向人群: 有一定HTML/CSS基础的同学 难度: 中等 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去

【碎碎念】百度前端技术学院春季班

早上迷迷糊糊被读研阶段的室友的微信叫醒了,邀约组队参加百度前端技术学院春季班(http://ife.baidu.com/),前室友在前端方面还是有一定造诣的,自己本身对前端开发又有一定兴趣,因此准备组团参与下. 想想我的技能树长得确实有点奇葩,最早是做嵌入式的,做了三个月点唱机跑去做产品和实施,跑完了大半个福州高校做某系统推广与实施后觉得做开发的童鞋的Bug有点多就边实施边改代码,久而久之就慢慢转向了开发,想想读研阶段白天上班写C#晚上下班写实验室的Java横向项目的经验也是蛮奇葩的,导致现在我

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

(作业)百度前端技术学院 任务八:响应式网格(栅格化)布局

百度前端技术学院 任务八:响应式网格(栅格化)布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px;