DOM练习(邓邓版)
先来图片:
今天直接粘代码:
下面是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练习(邓邓版)的更多相关文章
- DOM操作(基础版)
DOM操作(基础版) DOM是document Object Model的缩写,简称文档对象模型.只要记住这是操作文档的就行了. DOM基础选择器 1.getElementById(id); //获取 ...
- 【JavaScript DOM编程艺术(第二版)】笔记
第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\ 第2章 javascript语法 1.内建对象: 内建在javasc ...
- JavaScript DOM编程艺术第二版学习(1/4)
接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...
- JavaScript DOM 编程艺术(第二版) 初读学习笔记
这本书留给我的印象就是结构.表现和行为层的分离,以及书后面部分一直在强调的最佳实践原则:平稳退化,逐步增强,向后兼容以及性能考虑. 要注意这不是一本JavaScript入门书籍~ 2.1 准备工作 用 ...
- JavaScript DOM 编程艺术(第二版) 有待解决的问题
原书 P181,var repeat = "moveElement('"+elementID+"', "+final_x+", "+fina ...
- JavaScript DOM 编程艺术(第二版) 常用JS小脚本
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') ...
- WebApp触屏版网站开发要点
所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上 ...
- 从零开始 DOM操作 笔记
<div id="box" class="box"></div> --> var myBox = document.g ...
- DOM的使用
1. 修改: 3样: 1. 内容: 3个属性: 1. 获取或修改原始HTML片段: 元素.innerHTML 2. 获取或修改纯文本内容: 元素.textContent vs innerHTML 1. ...
随机推荐
- 安装kibana可视化平台工具
1.安装kibana 命令: wget https://artifacts.elastic.co/downloads/kibana/kibana-5.5.0-linux-x86_64.tar.gz ...
- Web Api 接口测试工具:Swagger
前言:WebApi接口开发完毕后,交付给前端人员或手机端开发者时接口说明文档是必不可少的配套设备,如果公司流程不规范大家使用口口相传的交接方式,而且没有改进的欲望,那你可以到此为止了.Swagger是 ...
- Tableau Dashboard
Dashboard仪表盘,用来展示多个图表,并展示之间的联动,分析数据.
- 用 Webpack 解决应用性能问题
1. 影响页面加载时长的 Top3 因素 页面初载时,加载大量 JavaScript 脚本: 页面初载时,加载大量 CSS 文件: 页面初载时,加载大量网络资源: 页面加载的越久,页面不可交互的时间就 ...
- Linux 性能测试工具Lmbench详解
Linux 性能测试工具Lmbench详解 2010-06-04 16:07 佚名 评测中心 字号:T | T Lmbench 是一套简易可移植的,符合ANSI/C 标准为UNIX/POSIX 而制定 ...
- python操作mysql,redis
import pymysqlip ="127.0.0.1"#数据库地址user = 'username'#数据库用户名password="pwd"#数据库密码d ...
- 原生JS获取li中的内容
- 用Java 实现断点续传 (HTTP)
在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...
- Sparrow 开发板化身电脑音量调节器
前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 之前的新浪不能用啦,这次部分图片用的sm.ms的图床,加载慢,请耐心,准备换图床. 1.开箱简介 来填坑了!这次是 Sparrow ...
- [BZOJ4305]数列的GCD:莫比乌斯反演+组合数学
分析 一开始想的是对恰好\(k\)个位置容斥,结果发现对\(\gcd\)有些无从下手,想了想发现自己又sb了. 考虑对\(\gcd\)进行容斥处理,弱化条件,现在我们要求的是使\(\gcd\)是\(d ...