使用JavaScript实现录入信息生成名片
首先是布局：
一个大的盒子模型套两个小的盒子模型：左边是录入信息生成界面，右边是名片显示界面。
框架：
这里新建一个css文件，用于外部链接使用装饰
/*最外层div，主框架*/
.frame{
width: 890px;
height: 460px;
border: 1px solid black;
margin: 0 auto;
margin-top: 60px;
background-color: azure;
}
/*左侧信息输入设置*/
.left_set{
width: 396px;
height: 460px;
line-height: 40px;
font-size: 18px;
top: 80px;
left: 60px;
}
/*右侧名片展示*/
.right_show{
height: 460px;
width: 488px;
/*border-left: 1px solid black;*/
}
主题html文件内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名片</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
<body>
<div class="frame" id="">
<div class="left_set" id="">
<lable for="">姓 名：<input type="text" name="" id="oInput1" value="" placeholder="请输入姓名"/></lable><br />
<lable for="">职 位：<input type="text" name="" id="oInput2" value="" placeholder="请输入职位"/></lable><br />
<lable for="">公司名称：<input type="text" name="" id="oInput3" value="" placeholder="请输入公司名称"/></lable><br />
<lable for="">手 机：<input type="text" name="" id="oInput4" value="" placeholder="请输入手机号"/></lable><br />
<lable for="">e m a i l：<input type="text" name="" id="oInput5" value="" placeholder="请输入email地址"/></lable><br />
<lable for="">地 址：<input type="text" name="" id="oInput6" value="" placeholder="请输入公司地址"/></lable><br />
<lable for="">风 格：
<select name="" id="mySelect">
<option value="fg1">风格一</option>
<option value="fg2">风格二</option>
</select>
</lable><br />
<input type="button" name="" id="btn" value="生成"/>
</div>
<!--<br />-->
<div class="right_show" id="bg">
<div id="card_wrap">
<div class="p01" id="">张大山 <em>产品经理</em></div>
<div class="p02" id="">
<p class="company">银河科技有限责任公司</p>
<p>手机：1808888888</p>
<p>email：yinhest@qq.com</p>
<p>地址：中关村银河大厦5层305</p>
<!--<hr align="center" color="aqua" width="50%"/>-->
</div>
</div>
</div>
</div>
</body>
</html>
当前效果：
现在我想要姓名职位等信息，排列在框架左侧；名片信息排列在右侧，并以黑线分开
在css文件中left_set属性中添加float：left;在right_show属性中添加float：right，实现2个盒子左右浮动
效果：
接下来在右侧导入名片图片样式，让生成的名片更具美观
需要在css文件中的right_show属性中添加如下css样式：
background-image: url(../img/bg01.jpg);//加载图片
background-repeat: no-repeat;//设置引入图片不重复
background-position: center;//设置图片在div中的位置，居中
效果：
实现左右文本内容到指定位置：
左侧文本至div正中间，右侧至图片的右下方
这里采用相对定位和绝对定位来操作
css文件中：添加
.frame{
position: relative;
}
.left_set{
position: absolute;
top: 80px;
left: 60px;
}
.right_show{
position: relative;
}
#card_wrap{
position: absolute;
top: 230px;
left: 245px;
}
#btn{
margin-left: 70px;
font-size: 18px;
}
效果：
发现右边字体间距过大：
.p01,.p02{ line-height: 12px; }//更改行高
css文件致此装饰的就差不多了，完整版代码：
/*最外层div，主框架*/
.frame{
width: 890px;
height: 460px;
border: 1px solid black;
margin: 0 auto;
margin-top: 60px;
background-color: azure;
position: relative;
}
/*左侧信息输入设置*/
.left_set{
width: 396px;
height: 460px;
line-height: 40px;
font-size: 18px;
top: 80px;
left: 60px;
float: left;
margin: auto;
position: relative;
}
/*右侧名片展示*/
.right_show{
height: 460px;
width: 488px;
border-left: 1px solid black;
float: right;
background-image: url(../img/bg01.jpg);
background-repeat: no-repeat;
background-position: center;
margin: auto;
position: relative;
}
#card_wrap{
position: absolute;
top: 230px;
left: 245px;
}
#btn{
margin-left: 70px;
font-size: 18px;
}
.p01,.p02{
line-height: 12px;
}
接下来就是通过JavaScript的进行信息的交互：
<script type="text/javascript">
window.onload=function () {
//创建input输入框的6个对象
var oInput1 = document.getElementById("oInput1"),
oInput2 = document.getElementById("oInput2"),
oInput3 = document.getElementById("oInput3"),
oInput4 = document.getElementById("oInput4"),
oInput5 = document.getElementById("oInput5"),
oInput6 = document.getElementById("oInput6");
//生成按钮对象
var set_btn = document.getElementById("btn");
//右侧里层div对象
var Div_obj = document.getElementById("card_wrap");
set_btn.onclick=function () {
//判断输入框中是否为空，有一个空的，就给出弹框提示，结果程序
input对象.value可以获取输入框里输入的文本数据
if(oInput1.value=="" || oInput2.value=="" || oInput3.value=="" || oInput4.value=="" || oInput5.value=="" || oInput6.value==""){
alert('请输入所有内容');
return;
}
拼接标签（加上获取的内容）
var sContent = '<div class="p01">'+oInput1.value+' <em>'+oInput2.value+'</em></div>'+
'<div class="p02">'+'<p>'+'公司：'+oInput3.value+'</p>'+'<p>'+'手机：'+oInput4.value+'</p>'+
'<p>'+'email：'+oInput5.value+'</p>'+'<p>'+'地址：'+oInput6.value+'</p>'+'</div>';
//将这个拼接的新内容传给外层div对象，修改他的内容
Div_obj.innerHTML = sContent;
}
//右侧外层标签对象
var bg = document.getElementById("bg");
//下拉列表框对象
var mysel = document.getElementById("mySelect");
onchange为改变事件，当选项中的内容变化时，函数被触发
mysel.onchange=function () {
获取select中option选项值：
var value = mysel.value;
通过判断值来实现图片的加载，更换名片风格
if(value=='fg1'){
bg.style.backgroundImage='url(../img/bg01.jpg)';
}else{
bg.style.backgroundImage='url(../img/bg02.jpg)';
}
}
}
</script>
HTML文件完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>名片</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/new_file.css"/>
<script type="text/javascript">
window.onload=function () {
var oInput1 = document.getElementById("oInput1"),
oInput2 = document.getElementById("oInput2"),
oInput3 = document.getElementById("oInput3"),
oInput4 = document.getElementById("oInput4"),
oInput5 = document.getElementById("oInput5"),
oInput6 = document.getElementById("oInput6");
//按钮对象
var set_btn = document.getElementById("btn");
//外层div
var Div_obj = document.getElementById("card_wrap");
set_btn.onclick=function () {
if(oInput1.value=="" || oInput2.value=="" || oInput3.value=="" || oInput4.value=="" || oInput5.value=="" || oInput6.value==""){
alert('请输入所有内容');
return;
}
var sContent = '<div class="p01">'+oInput1.value+' <em>'+oInput2.value+'</em></div>'+
'<div class="p02">'+'<p>'+'公司：'+oInput3.value+'</p>'+'<p>'+'手机：'+oInput4.value+'</p>'+
'<p>'+'email：'+oInput5.value+'</p>'+'<p>'+'地址：'+oInput6.value+'</p>'+'</div>';
Div_obj.innerHTML = sContent;
}
// var obj=document.getElementById('mySelect');
// var index=obj.selectedIndex; //序号，取当前选中选项的序号
// console.log(index);
// var val = obj.options[1].value;
// console.log(val);
var bg = document.getElementById("bg");
var mysel = document.getElementById("mySelect");
mysel.onchange=function () {
var value = mysel.value;
if(value=='fg1'){
bg.style.backgroundImage='url(../img/bg01.jpg)';
}else{
bg.style.backgroundImage='url(../img/bg02.jpg)';
}
}
}
</script>
<body>
<div class="frame" id="">
<div class="left_set" id="">
<lable for="">姓 名：<input type="text" name="" id="oInput1" value="" placeholder="请输入姓名"/></lable><br />
<lable for="">职 位：<input type="text" name="" id="oInput2" value="" placeholder="请输入职位"/></lable><br />
<lable for="">公司名称：<input type="text" name="" id="oInput3" value="" placeholder="请输入公司名称"/></lable><br />
<lable for="">手 机：<input type="text" name="" id="oInput4" value="" placeholder="请输入手机号"/></lable><br />
<lable for="">e m a i l：<input type="text" name="" id="oInput5" value="" placeholder="请输入email地址"/></lable><br />
<lable for="">地 址：<input type="text" name="" id="oInput6" value="" placeholder="请输入公司地址"/></lable><br />
<lable for="">风 格：
<select name="" id="mySelect">
<option value="fg1">风格一</option>
<option value="fg2">风格二</option>
</select>
</lable><br />
<input type="button" name="" id="btn" value="生成"/>
</div>
<!--<br />-->
<div class="right_show" id="bg">
<div id="card_wrap">
<div class="p01" id="">张大山 <em>产品经理</em></div>
<div class="p02" id="">
<p class="company">银河科技有限责任公司</p>
<p>手机：1808888888</p>
<p>email：yinhest@qq.com</p>
<p>地址：中关村银河大厦5层305</p>
<!--<hr align="center" color="aqua" width="50%"/>-->
</div>
</div>
</div>
</div>
</body>
</html>
效果：
至此，名称生成工具已基本实现完成！
使用JavaScript实现录入信息生成名片的更多相关文章
- Android之扫描二维码和根据输入信息生成名片二维码
开发中常常遇到二维码扫码操作,前段时间做项目要实现该功能,于是网上查找资料实现了,现在把他做出来给各位分享一下,主要包含了二维码扫描和生成二维码名片. 先来看看效果图: 生成的二维码,打开微信扫一 ...
- PHP生成名片、网址二维码
PHP生成名片.网址二维码 php生成名片(vcard)二维码: <?php$vname = 'test'; $vtel = '13800000000'; generateQRfromGoo ...
- JavaScript 解析 Django Python 生成的 datetime 数据 时区问题解决
JavaScript 解析 Django/Python 生成的 datetime 数据 当Web后台使用Django时,后台生成的时间数据类型就是Python类型的. 项目需要将几个时间存储到数据库中 ...
- 无法找到“XXX.exe”的调试信息，或者调试信息不匹配。未使用调试信息生成二进制文件
1.问题症状 已经处于Debug模式,运行时完全正常,但是一调试就出现对话框,显示出错信息:“无法找到“XXX.exe”的调试信息,或者调试信息不匹配.未使用调试信息生成二进制文件.” 2.解决方法 ...
- 二维码生成：使用 JavaScript 库QRCode.js生成二维码
QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...
- VS2008中编译通过，但调试时出现“未使用调试信息生成二进制文件”的问题
.只要是“建立项目的时候不应建立空项目,而应当建立一个“win32控制台应用程序”.这样确实可以解决问题.只要你选择的是这个"win32控制台应用程序"则在附加选项里面选不选上“空 ...
- Java 导出数据库表信息生成Word文档
一.前言 最近看见朋友写了一个导出数据库生成word文档的业务,感觉很有意思,研究了一下,这里也拿出来与大家分享一波~ 先来看看生成的word文档效果吧 下面我们也来一起简单的实现吧 二.Java 导 ...
- Javascript 二维码生成库：QRCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript 将 HTML 页面生成 PDF 并下载
最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...
随机推荐
- 设置Android模拟器的窗口大小
Android SDK 中两个位置可以设置Android模拟器的窗口大小 1.设置Android模拟器的分辨率 Android Virtual Device Manager中创建AVD时,窗口中部Re ...
- 手动mvn install指令向maven本地仓库安装jar包
mvn install:install-file -DgroupId=imsdriver(jar包的groupId) -DartifactId=imsdriver(jar包的artifactId) - ...
- 在Electron运行的子页面无法访问window.opener解决方案
我们的首页有一个window.open打开子页面后反向刷新父页面的功能,但是主页面如果开启了nodeIntegration=true,这个时候再设置nativeWindowOpen是不启作用的.再被w ...
- Egret入门学习日记 --- 第十篇（书中 2.9~2.13节 内容）
第十篇(书中 2.9~2.13节 内容) 好的 2.9节 开始! 总结一下重点: 1.之前通过 ImageLoader 类加载图片的方式,改成了 RES.getResByUrl 的方式. 跟着做: 重 ...
- XMemcached的基本使用
XMemcached是memcached的一个java客户端,基于java nio,支持memcached的所有协议.本文简要介绍XMemcached的基本使用. 一.添加依赖 <depende ...
- Lnamp的高级网站架构+动静分离+反向代理
Lnamp的架构 环境: 图上面是5台服务器 192.168.1.116 是nginx负载均衡+动静分离 192.168.1.117:linux+apache+php 192.168.1.118:li ...
- java日志框架系列（5）：logback框架appender详解
1.appender 1.什么是appender Appender 是负责写记录事件的组件. Appender 必须实现接口“ch.qos.logback.core.Appender”.该接口的重要方 ...
- XDebug调试
安装 访问Xdebug 点击download 找到RELEASES,点击 custom installation instructions. 在白色框框内填入phpinfo()出来的源码 点击Anal ...
- (java实现)双向循环链表
什么是双向循环链表 在了解双向循环链表之前,如果对链表还没有一个清晰的概念,建议你看看单链表和单向循环链表,这有利于你更好的理解下面的内容.(废话有点多[逃] 相比单链表,双向循环链表是一个更加复杂的 ...
- Java BinarySearch
Java BinarySearch /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternation ...