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学习总结（12）——多人开发 Git 分支管理详解
1.前言 在上一篇博客中我们主要讲解了Git 远程仓库,相信大家对远程的Git仓库有一定的了解,嘿嘿.在这一篇博客中我们来在大家讲解一下Git 分支管理,这可以说是Git的又一大特点.下面我们就来学习 ...
- CodeForces 551E GukiZ and GukiZiana
GukiZ and GukiZiana Time Limit: 10000ms Memory Limit: 262144KB This problem will be judged on CodeFo ...
- 第二次训练 密码acmore
网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26733#overview 贪心全场!!!! A题: #include <io ...
- [Codeup 25482]选美
[Codeup 25482 ]选美 题目 一年一度的星哥选美又拉开了帷幕 N个人报名参加选拔,每个人都有着各自的相貌参数和身材参数(不大于 10000 的正整数).你的任务是尽可能让更多人被星哥选中, ...
- C#--线程池与线程的种类
.NET CLR线程的种类 至少3个线程:主线程.调试线程.终结器线程 1.main thread 2.worker thread 3.finalizer thread 4.debugger help ...
- 框架统一出参数DTO格式
这个可以没必要定义. 每个接口返回自己的数据格式就好
- 5.2 calendar--通用日期的相关函数（4）
calendar类提供以下的函数来推断日历相关的内容: calendar.setfirstweekday(weekday) 设置一周里那一天作为第一天.0是表示星期一,6是表示星期天. 样例: #py ...
- 经验总结18--EF改动关系，多对多
EF改动关系让我费事蛮多时间.能查的资料少,网上试了非常多方法都不正确. 最后还是自己研究出来了.在这里和大家分享下,有更好的方法也能够分享下. 首先说说我一般做改动功能时,前台传參数,后台使用对象接 ...
- Linux系统调用具体解释（怎样从用户空间进入内核空间）
系统调用概述 计算机系统的各种硬件资源是有限的,在现代多任务操作系统上同一时候执行的多个进程都须要訪问这些资源,为了更好的管理这些资源进程是不同意直接操作的,全部对这些资源的訪问都必须有操作系统控制. ...
- Qt5.8 提供 Apple tvOS，watchOS的技术预览版
New Platforms Apple tvOS (technology preview) Apple watchOS (technology preview) https://wiki.qt.io/ ...