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/ ...
随机推荐
- _markupbase.py if not match: UnboundLocalError: local variable 'match' referenced before assignment，分析Python 库 html.parser 中存在的一个解析BUG
BUG触发时的完整报错内容(本地无关路径用已经用 **** 隐去): **************\lib\site-packages\bs4\builder\_htmlparser.py:78: U ...
- flask日期和时间
本文翻译自The Flask Mega-Tutorial Part XII: Dates and Times 这是Flask Mega-Tutorial系列的第十二部分,我将告诉你如何以适配所有用户的 ...
- mybatis源码阅读-SqlSessionFactory和SqlSession(三)
说明 读了3遍:https://my.oschina.net/zudajun/blog/665956 现在统一整理成笔记 并跟着源码一行一行调试 统一整理起来 SqlSession 接口定义 publ ...
- hdu 1829 带权并查集的运用类似于食物链但是更简单些
#include<stdio.h> #define N 1100000 struct node { int x,y; }f[N],pre[N]; int find(int x) { if( ...
- 收到微软寄来的MVP包裹
经过一年多的艰苦努力,最终在7月份获得了微软SharePoint的MVP. 今天收到了微软从美国寄来的包裹. 内部图: 奖牌: 回忆过去一年.白天和客户撕逼,晚上回家写博客,或者翻译英文文章,去论坛回 ...
- 介绍C++ STL常用模板使用方法的相关资料
1.vector的几种初始化及赋值方式
- Java系列之JDBC和ODBC之间的差别与联系
JDBC简单介绍 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于运行SQL语句的Java API,它是Java十三个规范之中的一个.能够为多种关系数据 ...
- 【cl】测试用例【文本框-电子邮箱】
电子邮箱控件用例: 1.只输入字母,如:abc 2.只输入数字,如:123 3.空白.空格或回车等 4.特殊的字符,如:￥,＄等 5.上述四种的组合 6.不正确的邮箱组合: ①.abc@sohucom ...
- android性能測试systrace
一:简单介绍 systrace 是 Android4.1 引入的一套用于做性能分析的工具. 基于 Linux 内核的 ftrace 机制(用于跟踪 Linux 内核的函数调用), 能够输出各个线程当前 ...
- Unsupported major.minor version 52.0 (unable to load class XXX
java项目构建从高版本JDK改为低版本JDK报错.这是再次编译时使用的JDK版本比你原来编译的版本低所导致的. 转自:http://blog.csdn.net/zixiao217 maven项目在服 ...