先来图片:

今天直接粘代码:

下面是html:

  

<h4>01.图片切换</h4>
<img width = "100" src = "../img/1.jpg" id = "pic" onclick = "change()"/>
<h4>02.计算器</h4>
<input type = "text" id = "first"/>
<select id = "select">
<option value = "+">+</option>
<option value = "-">-</option>
<option value = "*">*</option>
<option value = "/">/</option>
</select>
<input type = "text" id = "second"/>
<input type = "button" value = "计算" onclick = "calculate()"/>
<input type = "text" id = "result" value = ""/>
<h4>03.复选框</h4>
<label for = "ymq">羽毛球</label><input type = "checkbox" name = "hobby" id = "ymq"/>
<label for = "yy">游泳</label><input type = "checkbox" name = "hobby" id = "yy"/>
<label for = "lq">篮球</label><input type = "checkbox" name = "hobby" id = "lq"/>
<input type = "button" value = "全选" onclick = "All()"/>
<input type = "button" value = "反选" onclick = "Other()"/>
<input type = "button" value = "取消" onclick = "Clear()"/>


下面是js:

var times = 1;
function change() {
var pic = document.getElementById("pic");
if (times == 1) {
pic.src = "../img/2.jpg";
times = 2;
} else if (times == 2) {
pic.src = "../img/3.jpg";
times = 3;
} else {
pic.src = "../img/1.jpg";
times = 1;
}
}
function calculate() {
var first = document.getElementById("first").value;
var second = document.getElementById("second").value;
var select = document.getElementById("select").value;
var result = document.getElementById("result");
switch (select) {
case "+":
result.value = (first-0) + (second-0);
break;
case "-":
result.value = first - second;
break;
case "*":
result.value = first * second;
break;
case "/":
result.value = first / second;
break;
default:break;
}
}
function All(){
var hobby = document.getElementsByName("hobby");
for(var i = 0; i < hobby.length; i++){
hobby[i].checked = true;
}
}
function Other(){
var hobby = document.getElementsByName("hobby");
for(var i = 0; i < hobby.length; i++){
if(hobby[i].checked === false){
hobby[i].checked = true;
}else{
hobby[i].checked = false;
}
}
}
function Clear(){
var hobby = document.getElementsByName("hobby");
for(var i = 0; i < hobby.length; i++){
hobby[i].checked = false;
}
}

ok~

DOM练习(邓邓版)的更多相关文章

  1. DOM操作(基础版)

    DOM操作(基础版) DOM是document Object Model的缩写,简称文档对象模型.只要记住这是操作文档的就行了. DOM基础选择器 1.getElementById(id); //获取 ...

  2. 【JavaScript DOM编程艺术(第二版)】笔记

    第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\         第2章 javascript语法 1.内建对象: 内建在javasc ...

  3. JavaScript DOM编程艺术第二版学习(1/4)

    接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...

  4. JavaScript DOM 编程艺术(第二版) 初读学习笔记

    这本书留给我的印象就是结构.表现和行为层的分离,以及书后面部分一直在强调的最佳实践原则:平稳退化,逐步增强,向后兼容以及性能考虑. 要注意这不是一本JavaScript入门书籍~ 2.1 准备工作 用 ...

  5. JavaScript DOM 编程艺术(第二版) 有待解决的问题

    原书 P181,var repeat = "moveElement('"+elementID+"', "+final_x+", "+fina ...

  6. JavaScript DOM 编程艺术(第二版) 常用JS小脚本

    function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...

  7. WebApp触屏版网站开发要点

    所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...

  8. 从零开始 DOM操作 笔记

        <div id="box" class="box"></div>   --> var myBox = document.g ...

  9. DOM的使用

    1. 修改: 3样: 1. 内容: 3个属性: 1. 获取或修改原始HTML片段: 元素.innerHTML 2. 获取或修改纯文本内容: 元素.textContent vs innerHTML 1. ...

随机推荐

  1. jenkins复选框插件Extended Choice Parameter plugin

    转载 https://www.cnblogs.com/zndxall/p/9512059.html https://www.cnblogs.com/jwentest/p/7113399.html

  2. VMware导入ova报错

    报错如下: 此主机支持Intel VT-x,但Intel VT-x处于禁用状态.   解决方案如下: 联想E75主机,重启按F1进入BIOS Advanced—>CPU setup—>In ...

  3. MySQL数据库安装和启动

    目录 一.数据库介绍 二.数据库的分类 1. 关系型数据库系统 2. 当下的关系型数据库系统 3. 当下的非关系型数据库系统 4. 关系型和非关系型数据库系统的区别 三.MySQL的架构 四.MySQ ...

  4. Gym-100923A-Por Costel and Azerah(DP)

    链接: https://vjudge.net/problem/Gym-100923A 题意: Por Costel the Pig has received a royal invitation to ...

  5. HDU-4289-Control(最大流最小割,拆点)

    链接: https://vjudge.net/problem/HDU-4289 题意: You, the head of Department of Security, recently receiv ...

  6. 对浏览器如何计算CSS的研究---------------引用

    1. 加载CSS 在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载——根据href指明的链接: 上面的rel指明了它是一个样式文件.这个加载是异步,不会影响DO ...

  7. mysql存储ip数值

    字段使用 int unsigned 类型就可以满足存贮ip2long(ip)的数值 插入时,可以使用inet_aton('100.200.30.22') 将ip地址转换为数值 查询时,使用inet_n ...

  8. json解析工具类

    对jackson的ObjectMapper的封装: ObjectMapperUtils: import static com.fasterxml.jackson.core.JsonFactory.Fe ...

  9. Luogu P2678 跳石头

    题目链接:Click here Solution: 最小值最大,显然二分,二分出mid后贪心去除石头,判断m次内是否可行即可 Code: #include<bits/stdc++.h> # ...

  10. 【BZOJ3931】[CQOI2015]网络吞吐量

    Description 路由是指通过计算机网络把信息从源地址传输到目的地址的活动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为路由器.为了使数据包最快的到达目的地,路由器需要选择 ...