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/ ...
随机推荐
- raize5的修改。
( ( ; Col1: $; Col2: $; Col3: $; Col4: $ ), ( ; Col1: $; Col2: $FA; Col3: $; Col4: $ ), ( ; Col1: $C ...
- form提交表单中包含time类型数据
当数据库和实体类中含有date类型的数据时 ,form提交的时间数据只是string类型的,所以不能直接写入到java实体类和数据库,经过百度找到了解决方法 ,特地挪过来: 在controller中增 ...
- C# ArcgisEngine开发中，对一个图层进行过滤，只显示符合条件的要素
转自原文 C# ArcgisEngine开发中,对一个图层进行过滤,只显示符合条件的要素 有时候,我们要对图层上的地物进行有选择性的显示,以此来满足实际的功能要求. 按下面介绍的方法可轻松实现图层属性 ...
- MVVM设计模式基础知识--ICommand接口
命令是 Windows Presentation Foundation (WPF) 中的输入机制,它提供的输入处理比设备输入具有更高的语义级别. 命令有若干用途: 第一个用途是将语义以及调用命令的对象 ...
- UVA - 10061 How many zero's and how many digits ?
n!=x*b^y, 当x为正整数时,最大的y就是n!末尾0的个数了, 把n,b分别拆成素因子相乘的形式: 比如, n=5,b=16 n=5,b=2^4, 非常明显,末尾0的个数为0 10进制时,n!= ...
- Android应用开发-护眼提醒-总结篇
设计初衷: 在学习<第一行代码>的服务那章时,涉及到了alarmmanager的内容.然后笔者当时正好在关注"程序猿怎样保护眼睛"的问题. 于是便自己做了一个demo, ...
- 循环神经网络(RNN, Recurrent Neural Networks)——无非引入了环，解决时间序列问题
摘自:http://blog.csdn.net/heyongluoyao8/article/details/48636251 不同于传统的FNNs(Feed-forward Neural Networ ...
- 转四种常见的post请求
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...
- java javax.annotation.Resource注解的详解
转自:https://www.jb51.net/article/95456.htm java 注解:java javax.annotation.Resource 当我们在xml里面为类配置注入对象时 ...
- Python基本数据类型之字符串str
字符串 定义:它是一个有序的字符的集合,用于存储和表示基本的文本信息,‘’或“”或‘’‘ ’‘’中间包含的内容称之为字符串 字符串的结构类型为'...' "..." "' ...