js实现动态给一个div添加文本内容与简单的日历
2020-12-13 03:01
标签：style blog class code java c js实现动态给一个div添加文本内容（即在文本框中输入一段文字，点击设置文字按钮实现将文本框中的文字添加到div中） 在文本框中输入HTML标签，点击设置文字后，在div中的文字也会产生相应的HTML标签效果，比如输入 简易的日历: HTML代码： CSS代码： js代码： js实现动态给一个div添加文本内容与简单的日历,搜素材,soscw.com js实现动态给一个div添加文本内容与简单的日历 标签：style blog class code java c 原文地址：http://www.cnblogs.com/LO-ME/p/3722140.html
DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>title>
head>
style type="text/css">
#div1{background:#CCC; color:#000; width:190px; height:150px; border:1px solid #F00;}
style>
head>
body>
input id="text1" type="text"/>
input id="btn1" type="button" value="设置文字"/>
div id="div1">div>
body>
script type="text/javascript">
var text1 = document.getElementById("text1");
var btn1 = document.getElementById("btn1");
var div1 = document.getElementById("div1");
btn1.onclick=function(){
div1.innerHTML=text1.value;//获取text1中的文本text1.value，然后设置到div中（这里使用的事innerHTML还可以在文本框中输入标签，也能产生效果）
};
script>
html>
标题
那么标题这个文字就能实现h1的样式
DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>JavaScript简易日历 - 妙味课堂 - www.miaov.comtitle>
link href="miaov_style.css" rel="stylesheet" type="text/css" />
head>
body>
div id="tab" class="calendar">
ul>
li class="active">h2>1h2>p>JANp>li>
li>h2>2h2>p>FERp>li>
li>h2>3h2>p>MARp>li>
li>h2>4h2>p>APRp>li>
li>h2>5h2>p>MAYp>li>
li>h2>6h2>p>JUNp>li>
li>h2>7h2>p>JULp>li>
li>h2>8h2>p>AUGp>li>
li>h2>9h2>p>SEPp>li>
li>h2>10h2>p>OCTp>li>
li>h2>11h2>p>NOVp>li>
li>h2>12h2>p>DECp>li>
ul>
div class="text">
h2>1月活动h2>
p>快过年了，大家可以商量着去哪玩吧～p>
div>
div>
body>
html>
@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }
.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }
.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }