首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS模拟并美化的表单控件完整实例

Posted in Javascript onAugust 19, 2015

本文实例讲述了JS模拟并美化的表单控件效果实例。分享给大家供大家参考。具体如下：

这里演示使用JS美化并模拟网页表单控件，十分漂亮的表单效果，使用时可以将代码内的JS保存为文件, 方便调用，使用方法：WellForm(element) //element 为表单元素。

运行效果截图如下：

JS模拟并美化的表单控件完整实例

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟表单控件</title>
<style type="text/css"> 
/* ----表单控件CSS开始---- ↓ */
.WellForm *{margin:0;padding:0;}
.WellForm{font-size:12px;font-family:arial;line-height:21px;}
.WellForm pre{float:left;margin-right:10px;}
/*background*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText,
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM,
.WellForm .WellRadio,
.WellForm .WellCheckBox,
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton
{background:url(images/WellForm.gif) no-repeat;}
/*WellText*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}
.WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}
.WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}
.WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px\9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}
.WellForm .WellTextH{background-position:0 -63px;}
/*WellSelect*/
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}
.WellForm .SelectL{width:3px;background-position:0 -84px;}
.WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}
.WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}
.WellForm .WellSelect select{display:none;}
.WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}
.WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}
.WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}
.WellForm .WellSelect ul li.hover{background:#333;}
/*WellTextArea*/
.WellForm .WellTextArea{float:left;}
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM
{height:5px;overflow:hidden;}
.WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}
.WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}
.WellForm .WellTextArea .T .TL{background-position:0 -126px;}
.WellForm .WellTextArea .TH .TL{background-position:0 -131px;}
.WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}
.WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}
.WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}
.WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}
.WellForm .WellTextArea .B .BL{background-position:0 -146px;}
.WellForm .WellTextArea .BH .BL{background-position:0 -151px;}
.WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}
.WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}
.WellForm .WellTextArea .M,
.WellForm .WellTextArea .M .MR
{float:left;background:url(images/TextArea-1.gif) repeat-y;}
.WellForm .WellTextArea .M{background-position:0 0;}
.WellForm .WellTextArea .M .MR{background-position:right 0;}
.WellForm .WellTextArea .MH,
.WellForm .WellTextArea .MH .MR
{float:left;background:url(images/TextArea-2.gif) repeat-y;}
.WellForm .WellTextArea .MH{background-position:0 0;}
.WellForm .WellTextArea .MH .MR{background-position:right 0;}
.WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(images/TextArea.gif);font-family:arial;font-size:12px;resize:none;}
/*WellRadio*/
.WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}
.WellForm .WellRadioH{background-position:-15px -284px;}
.WellForm .WellRadio input{margin-top:13px;display:none;}
/*WellCheckBox*/
.WellForm .WellCheckBox{float:left; width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}
.WellForm .WellCheckBoxH{background-position:0 -283px;}
.WellForm .WellCheckBox input{margin-top:12px;display:none;}
/*WellButton*/
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}
.WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}
.WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}
.WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0\9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}
.WellForm .WellButtonH{background-position:0 -244px;}
/* ----表单控件CSS结束---- ↑ */
form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}
form .item{float:left;clear:both;width:100%;margin-bottom:10px;}
.WellForm label{float:left;width:4em;height:21px;text-align:right;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var aForm = document.getElementsByTagName("form");
 //多个表单
 for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);
};
/*------------------------------------------------- +
 可以将以下JS保存为文件, 方便调用
 使用方法：WellForm(element) //element 为表单元素
 +------------------------------------------------- */
// 获取class
function getClass(sClass, oParent)
{
 var aClass = []; 
 var reClass = new RegExp("(^| )" + sClass + "( |$)");
 var aElem = (oParent || document).getElementsByTagName("*");
 for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
 return aClass
}
// class是否存在
function hasClass(obj, sClass)
{
 var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
 return reg.test(obj.className)
}
// 添加class
function addClass(obj, sClass)
{
 hasClass(obj, sClass) || (obj.className += " "+sClass)
}
// 删除class
function removeClass(obj, sClass)
{
 if (hasClass(obj, sClass))
 {
  var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
  obj.className = obj.className.replace(reg, "");
 }
}
// 上一个元素
function prevElement(obj)
{
 return obj.previousSibling || obj.previousElementSibling || null 
}
// 下一个元素
function nextElement(obj)
{
 return obj.nextSibling || obj.nextElementSibling || null 
}
// 自定义表单函数
function WellForm(form)
{
 var i = 0;
 var zIndex = 1;
 var aInput = form.getElementsByTagName("input"); 
 var aSelect = form.getElementsByTagName("select");
 var aTextArea = form.getElementsByTagName("textarea");
 form.className = "WellForm";
 /* 单行文本框 */
 var aText = [];
 for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]);
 for (i = 0; i < aText.length; i++)
 {
  var oTextL = document.createElement("div");
  var oTextR = document.createElement("div"); 
  oTextL.className = "TextL";
  oTextR.className = "TextR";
  aText[i].className = "WellText";
  aText[i].parentNode.insertBefore(oTextL, aText[i]);  
  aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i]));
  //获取焦点
  aText[i].onfocus = function ()
  {
   addClass(this, "WellTextH");
   addClass(prevElement(this), "TextLH");
   addClass(nextElement(this), "TextRH")
  };
  //失去焦点
  aText[i].onblur = function ()
  {
   removeClass(this, "WellTextH");
   removeClass(prevElement(this), "TextLH");
   removeClass(nextElement(this), "TextRH")
  }
 }
 /* 多行文本框 */ 
 for (i = 0; i < aTextArea.length; i++)
 {
  var oTextArea = document.createElement("div");
  oTextArea.className = "WellTextArea";
  //上边框
  var oT = document.createElement("div");
  var oTL = document.createElement("div");
  var oTM = document.createElement("div");  
  oT.className = "T";
  oTL.className = "TL";
  oTM.className = "TM";  
  oTL.appendChild(oTM);
  oT.appendChild(oTL);
  //中间边框
  var oM = document.createElement("div");
  var oMR = document.createElement("div");  
  oM.className = "M";
  oMR.className = "MR";  
  oM.appendChild(oMR);
  //下边框
  var oB = document.createElement("div");
  var oBL = document.createElement("div");
  var oBM = document.createElement("div");  
  oB.className = "B";
  oBL.className = "BL";
  oBM.className = "BM";  
  oBL.appendChild(oBM);
  oB.appendChild(oBL);  
  //插入结构
  aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]);  
  oMR.appendChild(aTextArea[i]);
  oTextArea.appendChild(oT);  
  oTextArea.appendChild(oM);
  oTextArea.appendChild(oB);  
  oTextArea.style.width = oMR.offsetWidth + "px";
  //获取焦点
  aTextArea[i].onfocus = function ()
  {
   var M = this.parentNode.parentNode;
   addClass(M, "MH");
   addClass(prevElement(M), "TH");
   addClass(nextElement(M), "BH")
  };
  aTextArea[i].onblur = function ()
  {
   var M = this.parentNode.parentNode;
   removeClass(M, "MH");
   removeClass(prevElement(M), "TH");
   removeClass(nextElement(M), "BH")
  }
 }
 /* 单选框 */
 var aRadio = [];
 for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]);
 for (i = 0; i < aRadio.length; i++)
 {
  var oRadio = document.createElement("div");
  oRadio.className = "WellRadio"; 
  aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]);
  oRadio.appendChild(aRadio[i]);
  aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH");
  oRadio.onclick = function ()
  {
   var siblings = getClass("WellRadio", this.parentNode);
   for (i = 0; i < siblings.length; i++)
   {
    removeClass(siblings[i], "WellRadioH");
    siblings[i].children[0].checked = false;
   }
   addClass(this, "WellRadioH");
   this.children[0].checked = true
  }
 }
 /* 复选框 */
 var aCheckBox = [];
 for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]);
 for (i = 0; i < aCheckBox.length; i++)
 {
  var oCheckBox = document.createElement("div");
  oCheckBox.className = "WellCheckBox"; 
  aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]);
  oCheckBox.appendChild(aCheckBox[i]);
  aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH");
  oCheckBox.onclick = function ()
  {   
   this.children[0].checked = !this.children[0].checked;
   this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH")
  }
 }
 /* 按钮 */
 var aButton = [];
 for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]);
 for (i = 0; i < aButton.length; i++)
 {
  var oBtnL = document.createElement("div");
  var oBtnR = document.createElement("div");  
  oBtnL.className = "ButtonL";
  oBtnR.className = "ButtonR";  
  aButton[i].className = "WellButton";
  aButton[i].parentNode.insertBefore(oBtnL, aButton[i]);
  aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i]));
  //鼠标移入
  aButton[i].onmouseover = function ()
  {
   addClass(this, "WellButtonH");
   addClass(prevElement(this), "ButtonLH");
   addClass(nextElement(this), "ButtonRH"); 
  };
  //鼠标移出
  aButton[i].onmouseout = function ()
  {
   removeClass(this, "WellButtonH");
   removeClass(prevElement(this), "ButtonLH");
   removeClass(nextElement(this), "ButtonRH"); 
  }
 }
 /* 下拉菜单 */
 for (i = 0; i < aSelect.length; i++)
 {
  var oFragment = document.createDocumentFragment();
  var oSelectL = document.createElement("div");
  var oSelectR = document.createElement("div");
  var oWellSelect = document.createElement("div");
  var oEm = document.createElement("em");
  var oUl = document.createElement("ul");
  oSelectL.className = "SelectL";
  oSelectR.className = "SelectR";
  oWellSelect.className = "WellSelect";  
  //插入结构
  aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]);
  aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i]));
  oUl.style.width = oWellSelect.style.width = aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px";  
  for (var j = 0; j < aSelect[i].options.length; j++)
  {
   var oLi = document.createElement("li");
   oLi.innerHTML = aSelect[i].options[j].text;
   oLi["sValue"] = aSelect[i].options[j].value;
   oFragment.appendChild(oLi);
   aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text)
  }
  oUl.appendChild(oFragment);
  oWellSelect.appendChild(oEm);
  oWellSelect.appendChild(oUl);
  aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]);
  oWellSelect.appendChild(aSelect[i]);
  oWellSelect.onclick = oSelectR.onclick = function (event)
  {
   var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0];
   var aUl = form.getElementsByTagName("ul");
   this.parentNode.style.position = "relative";
   this.parentNode.style.zIndex = zIndex++;
   o.style.display = o.style.display == "block" ? "none" : "block";
   for (i = 0; i < aUl.length; i++)
   {
    if (o == aUl[i]) continue;
    aUl[i].style.display = "none";
   }
   var aLi = o.getElementsByTagName("li");
   for (i = 0; i < aLi.length; i++)
   {
    aLi[i].onmouseover = function ()
    {
     this.className = "hover" 
    };
    aLi[i].onmouseout = function ()
    {
     this.className = "" 
    };
    aLi[i].onclick = function ()
    {
     prevElement(this.parentNode).innerHTML = this.innerHTML;
     nextElement(this.parentNode).value = this.sValue
    }
   }
   (event || window.event).cancelBubble = true;
   document.onclick = function ()
   {
    o.style.display = "none" 
   }
  }
 }
}
</script>
</head>
<body>
<form>
 <div class="item"><label>姓名：</label><input type="text" name="name" /></div>
 <div class="item"><label>电话：</label><input type="text" name="tel" /></div>
 <div class="item">
  <label>性别：</label>
  <select name="sex">
   <option value="男孩">男孩</option>
   <option value="女孩" selected="selected">女孩</option>
   <option value="人妖">人妖</option>
  </select>
 </div>
 <div class="item">
  <label>生日：</label>
  <select name="month">
   <option value="1">1月</option>
   <option value="2">2月</option>
   <option value="3">3月</option>
   <option value="4">4月</option>
   <option value="5">5月</option>
   <option value="6">6月</option>
   <option value="7" selected="selected">7月</option>
   <option value="8">8月</option>
   <option value="9">9月</option>
   <option value="10">10月</option>
  </select>
  <select name="day">
   <option value="1">1号</option>
   <option value="2">2号</option>
   <option value="3">3号</option>
   <option value="4">4号</option>
   <option value="5">5号</option>
   <option value="6" selected="selected">6号</option>
   <option value="7">7号</option>
   <option value="8">8号</option>
   <option value="9">9号</option>
   <option value="10">10号</option>
   <option value="11">11号</option>
   <option value="12">12号</option>
   <option value="13">13号</option>
   <option value="14">14号</option>
   <option value="15">15号</option>
   <option value="16">16号</option>
  </select>
  <select name="year">
   <option value="2000">2000年</option>
   <option value="2001">2001年</option>
   <option value="2002">2002年</option>
   <option value="2003">2003年</option>
   <option value="2004">2004年</option>
   <option value="2005">2005年</option>
   <option value="2006">2006年</option>
   <option value="2007">2007年</option>
   <option value="2008">2008年</option>
   <option value="2009">2009年</option>
   <option value="2010" selected="selected">2010年</option>
   <option value="2011">2011年</option>
   <option value="2012">2012年</option>
   <option value="2013">2013年</option>
  </select>
 </div>
 <div class="item">
  <label>婚姻：</label>
  <input type="radio" name="marry" value="已婚" /><pre>已婚</pre>
  <input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre>
 </div>
 <div class="item">
  <label>爱好：</label>
  <input type="checkbox" name="like" value="吃饭" /><pre>吃饭</pre>
  <input type="checkbox" name="like" value="睡觉" /><pre>睡觉</pre>
  <input type="checkbox" name="like" value="上网" checked="checked" /><pre>上网</pre>
  <input type="checkbox" name="like" value="打游戏" checked="checked" /><pre>打游戏</pre>
 </div>
 <div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div>
 <div class="item"><label>备注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div>
 <div class="item"><label>说明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div>
 <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
<form>
 <div class="item"><label>用户名：</label><input type="text" name="username" /></div>
 <div class="item"><label>密码：</label><input type="password" name="pwd" /></div>
 <div class="item"><label>验证码：</label><input type="text" name="code" style="width:60px;" /></div>
 <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS模拟并美化的表单控件完整实例

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
jquery小火箭返回顶部代码分享
Aug 19 #Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 #Javascript
js实现当前输入框高亮显示的方法
Aug 19 #Javascript
jQuery实现的仿select功能代码
Aug 19 #Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 #Javascript
destoon(1) TableField(1)  AD域(1) nginx(76) 组策略(1) create(1) mounted(1) 日志格式分析(1) 子查询(1) Windows server 2012(17)
You might like
php 分页类 扩展代码
2009/06/11 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
对javascript继承的理解
2016/10/11 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python 日期时间datetime 加一天，减一天，加减一小时一分钟,加减一年
2020/04/16 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python爬虫要用到的库总结
2020/07/28 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店：Wind & Weather
2019/05/29 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
年度考核自我评价
2014/01/25 职场文书
企业趣味活动方案
2014/08/21 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
同学会邀请函模板
2015/01/30 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
四年级作文之植物
2019/09/20 职场文书
最新农村养殖致富：资金投入较低的创业项目有哪些？
2019/09/26 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫