【JS学习】慕课网4-1编程挑战 函数
要求:小伙伴们,请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数,点击相应按钮执行相应操作,点击"取消设置"按钮后,提示是否取消设置,如是执行操作,否则不做操作。
需要注意的是恢复函数命名为reset时候是无效的,必须改为别的名字。因为reset是保留关键字 见http://www.w3cschool.cc/js/js-reserved.html
<!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="changewh()">
<input type="button" value="隐藏内容" onclick="hide()">
<input type="button" value="显示内容" onclick="display()">
<input type="button" value="取消设置" onclick="recover()">
</form>
<script type="text/javascript">
var mytxt=document.getElementById("txt");
//定义"改变颜色"的函数
function changecolor(){
mytxt.style.color="red";
} //定义"改变宽高"的函数
function changewh(){
mytxt.style.width="500px";
mytxt.style.height="500px";
} //定义"隐藏内容"的函数
function hide(){
mytxt.style.display="none";
} //定义"显示内容"的函数
function display(){
mytxt.style.display="block";
} //定义"取消设置"的函数
/*function reset(){
var message=confirm("reset?");
if (message==true)
{
mytxt.removeAttribute("style")
} }*/ function recover(){
var msg=confirm("是否取消所有设置?");
if(msg==true){
mytxt.removeAttribute("style");
}
} </script>
</body>
</html>
【JS学习】慕课网4-1编程挑战 函数的更多相关文章
- 教你一步一步用 Node.js 制作慕课网视频爬虫
转自:http://www.jianshu.com/p/d7631fc695af 开始 这个教程十分适合初学 Node.js 的初学者看(因为我也是一只初学的菜鸟~) 在这里,我就默认大家都已经在自己 ...
- JS入门-慕课网
javascript是一种弱类型的数据交互语言, ch 1 数据类型 js中有六种数据类型:nunmber.string.boolean.null.undenfined.object原始类型:numb ...
- 慕课网 javascript深入浅出编程练习
任务 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false ...
- Node.js学习笔记(3)——关于回调函数和函数的回调
说明:本人是node.js的初学者,尝试向别人解释这是怎么回事是自我学习的一个好方法.如果你发现有些地方并不是那么正确,欢迎提出来让我知道以便修正,共同进步,谢过^_^. 欢迎交流,本人微 ...
- 精通D3.js学习笔记(1)基础的函数
买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var i ...
- JS学习:第二周——NO.1回调函数
[回调函数] 定义:把一个函数的定义阶段,作为参数,传给另一个函数: 回调函数调用次数,取决于条件: 回调函数可以传参: 回调函数可以给变this指向,默认是window: 回调函数没有返回值,for ...
- 【JS学习】慕课网8-17编程练习 网页的返回与跳转
编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是 ...
- 编程挑战JavaScript进阶篇(慕课网题目)
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
随机推荐
- tcpdump 与 抓包分析
在Windows下一般使用WireShark 抓包软件,tcpdump 是 Linux 系统的抓包软件.它可以抓取 TCP/IP 协议族的数据包,支持针对网络层.协议.主机.端口的过滤,并提供 and ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- js 输入整数
1.我用 /^\+?[1-9][0-9]*$/ 貌似不对(小数也可以输入) 2.输入整数 n = /^[1-9]\d*$/; . -]\d*$/; //判断字符串是否为数字 if (!value) ...
- mqtt发送消息,消息体为16进制
在idea 加入代码 :-server -XX:PermSize=256M -XX:MaxPermSize=256M -Dfile.encoding=UTF-8
- pipeline语法之判断一个文件存在与否
先看一个例子,原理,根据命令返回的状态值来判断它的存在与否 pipeline { agent any stages { stage("check file if exists"){ ...
- 微信支持的Authorization code授权模式(公众号开发)(开放平台资料中心中的代公众号发起网页授权)
链接:https://blog.csdn.net/ASZJBGD/article/details/82838356 主要流程分为两步: 1.获取code 2.通过code换取accesstoken 流 ...
- Bazel: Ubuntu安装bazel-version-installer-os.sh失败的解决方法。
使用 bash ./bazel-version-installer-os.sh from: http://www.cnblogs.com/Need4Speak/p/5438240.html
- 四轴电池ADC监控学习
一.硬件原理 电池供电通过两个分压电阻接地,STM32则在两电阻中间通过ADC检测电池电压.(引脚BAT_DET) 二.ADC通道初始化 //初始化电池检测ADC //开启ADC1的通道8 //Bat ...
- sql server 基础语法2
别名,选择,查询,排序,去重,筛选 select * from UserInfo as ui --起别名 select UserName,UserPwd --指定选择的列 from UserInfo ...