JS 样式叠加显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: auto;
padding: 0px;
}
#aa{
width: 1000px;
height: 310px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
}
#a1{
width: 1000px;
height: 100px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 40px;
}
#a11{
width: 200px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
}
#a111{
width: 180px;
height: 30px;
margin-top: 5px;
margin-left: 10px;
border-radius: 10px,20%;
}
#a12{
width: 100px;
height: 40px; float: left;
margin-top: 30px;
}
#a112{
width: 50px;
height: 30px;
margin-top: 5px;
}
#a2{
width: 1000px;
height: 100px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
}
#a21{
width: 200px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
text-align: center;
line-height: 40px;
}
#a22{
width: 400px;
height: 100px; float: left;
text-align: center;
line-height: 40px;
}
#bb{
width: 1000px;
height: 310px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
} #b1{
width: 1000px;
height: 80px; background-color: white;
box-shadow: 8px 8px 8px gray;
line-height: 80px;
}
#b2{
width: 1000px;
height: 100px; background-color: white;
box-shadow: 8px 8px 8px gray;
line-height: 80px;
margin-top: 10px;
}
#b21{
width: 200px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
} #b211{
width: 180px;
height: 30px;
margin-top: 5px;
margin-left: 10px;
border-radius: 10px,20%; }
#b22{
width: 40px;
height: 40px; text-align: center;
line-height: 40px;
float: left;
margin-top: 30px;
}
#b231{
width: 180px;
height: 30px;
margin-top: 5px;
margin-left: 10px;
border-radius: 10px,20%; }
#b224{
width: 100px;
height: 40px; float: left;
margin-top: 30px;
}
#b241{
width: 50px;
height: 40px;
margin-top: 5px;
}
#b23{
width: 200px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
}
#b24{
width: 100px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
}
#b3{
width: 1000px;
height: 100px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
}
#b31{
width: 200px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
text-align: center;
line-height: 40px;
}
#b32{
width: 400px;
height: 100px; float: left;
text-align: center;
line-height: 40px;
}
#cc{
width: 1000px;
height: 310px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 10px;
}
#c{
width: 1000px;
height: 100px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
}
#c1{
width: 1000px;
height: 150px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
}
#c11{
width: 1000px;
height: 70px; }
#c111{
width: 150px;
height: 70px; float: left;
margin-left: 20px;
}
#c112{
width: 150px;
height: 70px; float: left;
margin-left: 10px;
}
#c113{
width: 150px;
height: 70px; float: left;
margin-left: 10px;
}
#c114{
width: 150px;
height: 70px; float: left;
margin-left: 10px;
}
#c115{
width: 150px;
height: 70px; float: left;
margin-left: 10px;
}
#c12{
width: 1000px;
height: 78px; text-align: center;
line-height: 78px;
}
#c121{
width: 100px;
height: 78px; float: left;
margin-left: 20px;
}
#c122{
width: 100px;
height: 78px; float: left;
margin-left: 10px;
}
#c123{
width: 100px;
height: 78px; float: left;
margin-left: 10px;
}
#c124{
width: 100px;
height: 78px; float: left;
margin-left: 10px;
}
#c125{
width: 200px;
height: 78px; float: left;
margin-left: 10px;
}
#c1211{
width: 60px;
height: 30px;
}
#c1212{
width: 60px;
height: 30px;
}
#c1213{
width: 60px;
height: 30px;
}
#c1214{
width: 60px;
height: 30px;
}
#c1215{
width: 100px;
height: 30px;
background-color: blue;
}
#c2{
width: 1000px;
height: 100px; background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
}
#c21{
width: 200px;
height: 40px; float: left;
margin-top: 30px;
margin-left: 20px;
text-align: center;
line-height: 40px;
}
#c22{
width: 400px;
height: 100px; float: left;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="aa">
1、innerHTML 的基本用法
<div id="a1">
<div id="a11">
<input type="" name="a111" id="a111" value="" />
</div>
<div id="a12">
<input type="submit" name="a112" id="a112" value="提交" onclick="b1()"/>
</div>
</div>
<div id="a2">
<div id="a21">
提交后在这里显示：
</div>
<div id="a22"> </div>
</div>
</div>
<div id="bb">
<div id="b1">
2、innerhtml、字符串、判断的基本应用
</div>
<div id="b2">
<div id="b21">
<input type="" name="b211" id="b211" value="" />
</div>
<div id="b22">
+
</div>
<div id="b23">
<input type="" name="b231" id="b231" value="" />
</div>
<div id="b24">
<input type="submit" name="b241" id="b241" value="提交" onclick="b2()"/>
</div>
</div>
<div id="b3">
<div id="b31">
提交后在这里显示：
</div>
<div id="b32"> </div>
</div>
</div>
<div id="cc">
3、数组输出练习
<div id="c1">
<div id="c11">
<div id="c111">
已知数组内容：
</div>
<div id="c112">
1、这是第一句话
</div>
<div id="c113">
2、这是第二句话
</div>
<div id="c114">
3、这是第三句话
</div>
<div id="c115">
4、这是第四句话
</div>
</div>
<div id="c12">
<div id="c121">
<input type="submit" name="c1211" id="c1211" value="提取1" onclick="b3()"/>
</div>
<div id="c122">
<input type="submit" name="c1212" id="c1212" value="提取2" onclick="b4()"/>
</div>
<div id="c123">
<input type="submit" name="c1213" id="c1213" value="提取3" onclick="b5()"/>
</div>
<div id="c124">
<input type="submit" name="c1214" id="c1214" value="提取4" onclick="b6()"/>
</div>
<div id="c125">
<input type="submit" name="c1215" id="c1215" value="全部弹出提取" onclick="b7()"/>
</div>
</div>
</div>
<div id="c2">
<div id="c21">
提交后在这里显示：
</div>
<div id="c22"> </div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function b1(){
var a112 = document.getElementById("a111").value;
a22.innerHTML = a112
}
function b2(){
var b241= document.getElementById("b211").value+document.getElementById("b231").value;
b32.innerHTML = b241
}
function b3(){
var a1211 = document.getElementById("c112").innerHTML;
c22.innerHTML = a1211
}
function b4(){
var a1212 = document.getElementById("c113").innerHTML;
c22.innerHTML = a1212
}
function b5(){
var a1213 = document.getElementById("c114").innerHTML;
c22.innerHTML = a1213
}
function b6(){
var a1214 = document.getElementById("c115").innerHTML;
c22.innerHTML = a1214
}
function b7(){
var a1215 = document.getElementById("c112").innerHTML;
alert(a1215)
var a1216 = document.getElementById("c113").innerHTML;
alert(a1216)
var a1217 = document.getElementById("c114").innerHTML;
alert(a1217)
var a1218 = document.getElementById("c115").innerHTML;
alert(a1218)
}
</script>
JS 样式叠加显示的更多相关文章
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- JavaWeb和WebGIS学习笔记（四）——使用uDig美化地图，并叠加显示多个图层
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- html单页面通过cdn引入element-ui组件样式不显示问题
html单页面通过cdn引入element-ui组件样式不显示问题 必须先引入vue,再通过cdn引入element,否则element-ui组件与样式无效. <!DOCTYPE html> ...
- 高德地图与CAD图叠加显示方法汇总及优缺点分析
前言 高德地图应用在许多领域,平常我们用的地图导航,除过正常的地图导航指引功能之外,其实还有很多实用的功能.如高德影像地图应用在包括地理.土地测量.水文学.生态学.气象学以及海洋学等方面.Auto ...
- 搜索框js样式（通用型）
HTML部分代码: -------------------------------------------------------------- <div class="search_ ...
- Qt中在图片上叠加显示文字
Qt中在图片上叠加显示文字 QCustLabel::QCustLabel(QWidget *parent):QLabel(parent){ setPixmap(QPixmap(QString::f ...
- js中动态载入css js样式
js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...
- 【js】【图片瀑布流】js瀑布流显示图片20180315
js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
随机推荐
- dev的汉化
dev汉化网上有很多介绍.自己感觉还是用ini文件,用Localization Component来的简单方便. 但是根据其16.1.6的demo死活出问题.原因是ini文件的编码问题.转换到位自然就 ...
- [bzoj1452][JSOI2009]Count_树状数组
Count bzoj-1452 JSOI-2009 题目大意:请维护一个平面内的数据结构,支持:单点修改,查询矩形内给定权值出现次数. 注释:$1\le n,m\le 300$,$1\le Q \le ...
- 洛谷——P1095 守望者的逃离
https://www.luogu.org/problem/show?pid=1095#sub 题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交 ...
- TortoiseGit生成PuttyKey与GitHub的SSH进行关联
1.打开Puttygen 要到进度条满格为止,知道出现如下界面: 把上面的Key复制. 最后点击[Save private key]保存. 2.登录GitHub进行如下操作: Settings-> ...
- ios自己定义类(UIView)代码生成简单的UITableViewCell
因为一个项目中有大量的UITableViewCell须要书写,样式几乎相同都是 文字介绍:显示内容 这种. 自己又懒得写UITableViewCell类嫌不是必需:在方法tableView:cellF ...
- android发送get请求时报错
异常信息: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.synology.synologycloud/ ...
- 黑马day01xml 解析方式与原理分析
dom解析方式和sax解析
- Java系列之JDBC和ODBC之间的差别与联系
JDBC简单介绍 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于运行SQL语句的Java API,它是Java十三个规范之中的一个.能够为多种关系数据 ...
- android 构建GPS Provide步骤及信息
构建GPS Provide步骤及信息 1. 用GPS2GoogleEarth录制KML文件 2. KML文件 2.1 经纬度解析 <LineString> <coordina ...
- Swift - 可编辑表格样例（可直接编辑单元格中内容、移动删除单元格）
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...