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/ ...
随机推荐
- Git 基础教程 之 分支管理及策略
创建一个属于自己的分支,别人看不到,你在你自己的分支上干活, 想提交就提交,直至开发完毕后,再一次性合并到原来分支上.这样,既安全,又不影响他人工作. 在实际的开发过程中,应照几个基 ...
- 学习EXTJS6（5）基本功能-进度条组件
Ext.ProgressBar有二种模式:手动和自动:手动:自己控制显示.进度.更新.清除.自动只需要调用Wait方法即可. 配置项: 配置项 类型 说明 renderTo String 指定页面 ...
- MyBatis之java.lang.UnsupportedOperationException异常解决方案
今天在使用MyBatis执行sql语句时,出现如下异常: 执行的sql语句配置信息如下: <select id="getColumnsByTableName" paramet ...
- TortoiseGit生成PuttyKey与GitHub的SSH进行关联
1.打开Puttygen 要到进度条满格为止,知道出现如下界面: 把上面的Key复制. 最后点击[Save private key]保存. 2.登录GitHub进行如下操作: Settings-> ...
- HttpSession的深入分析与研究
HTTP是无状态协议,这意味着每次client检索网页时,都要单独打开一个server连接,因此server不会记录下先前client请求的不论什么信息. 有三种方法来维持client与server的 ...
- [MSSQL]採用pivot函数实现动态行转列
环境要求:2005+ 在日常需求中常常会有行转列的事情需求处理.假设不是动态的行,那么我们能够採取case when 罗列处理. 在sql 2005曾经处理动态行或列的时候,通常採用拼接字符串的方法处 ...
- 扩展欧几里德 poj1061 青蛙的约会
扩展欧几里德很经典.可是也有时候挺难用的.一些东西一下子想不明确.. 于是来了一个逆天模板..仅仅要能列出Ax+By=C.就能解出x>=bound的一组解了~ LL exgcd(LL a, LL ...
- fzu 1075 分解素因子
代码: #include<cstdio> #include<cstring> #include<iostream> using namespace std; int ...
- cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第0步---知识点总结&效果预览&设计思路
/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏.这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写.第一别全然照搬代码:第二能够说 ...
- 《转》Ceilometer Alarm API 參数具体解释 及 举例说明
Ceilometer Alarm是H版新加入的功能,监控报警是云平台必不可少的部分,Ceilometer已经实现了比較完好的监控体系.报警怎么能缺少呢?用过AWS CloudWatch Alarm的人 ...