利用js+html+css实现文本替换，时间日历功能！
2019-11-26 本文已影响0人
熙如意Xiry8881
replace.htm 详情：
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta charset="utf-8">
<title>趣味编辑器</title>
<style type="text/css">
* {
font-family: "黑体";
}
h1 {
font-size: 24px;
text-align: center;
}
body {
margin: 0;
}
#center {
width: 320px;
margin: 0 auto;
}
.right {
text-align: right;
}
input{
width: 310px;
height: 35px;
}
textarea{
width: 310px;
height: 80px;
}
input,textarea{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
textarea::focus, input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
#calc {
width: 100%;
height: 40px;
/* line-height: 40px;*/
text-align: center;
background-color: #eee;
border: 5px;
color: #666;
display: block;
font-size: 16px;
}
#calc:hover{
color:white;
background: #4caf50;
}
/*日历*/
#calendar{
background:#fff;
color:#333;
font-size:0.8em;
}
#tittle{
font-size:1.4em;
padding:4px 0.55em;
}
#days th {
font-weight:bold;
text-align:center;
padding:4px 0.55em;
}
#calendar td{
text-align:center;
padding:4px 0.55em;
}
#today{
color:#F00;
font-weight:bold;
}
</style>
<script language="javascript">
//文本替换
function calc() {
var source = new String();
var select = new String();
var replace = new String();
source = document.getElementById("source").value;
select = document.getElementById("select").value;
replace = document.getElementById("replace").value;
var regS = new RegExp(select, "g");
document.getElementById("result").value = source.replace(regS, replace);
}
//文本保存
</script>
</head>
<body>
<!--替换开始-->
<div id="center">
<table>
<tr>
<td colspan="2">
<h1>文本替换</h1>
</td>
</tr>
<tr>
<td><textarea id="source" placeholder="请输入文本内容"></textarea></td>
</tr>
<tr>
<td><input type="text" id="select" placeholder="请输入查找内容"></td>
</tr>
<tr>
<td><input type="text" id="replace" placeholder="将它替换为..."></td>
</tr>
<tr>
<td><textarea id="result" placeholder="输出结果显示"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="calc" value="全部替换" onclick="calc()">
</td>
</tr>
</table>
<!--日历开始-->
<script type="text/javascript">
var calendar = {
dayTable:null, //初始化TABLE
year:null, //初始化年
month:null, //初始化月份
getFirstDay:function(year,month){ //获取每个月第一天再星期几
var firstDay = new Date(year,month,1);
return firstDay.getDay(); //getDay()方法来获取
},
getMonthLen:function(year,month){ //获取当月总共有多少天
var nextMonth = new Date(year,month+1,1); //获取下个月的第一天
nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数
return nextMonth.getDate(); //返回当天日期
},
createCalendar:function(form,date){ //创建日历方法
calendar.year = date.getFullYear(); //获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用
calendar.month = date.getMonth(); //跟上面获取年份的目的一样
form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月'; //插入年份和月
份
calendar.clearCalendar(form); //清空TABLE
var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //获取月份长度
var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //获取月份首天为星期几
for(var i = 1;i <= monthLen;i++){ //循环写入每天的值进入TABLE中
calendar.dayTable[i+firstDay-1].innerHTML = i; //i为循环值,加上第一天的星期值刚可以对应TABLE位置,但由于数组从0开始
算,所以需要减去1
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date
().getFullYear()){ //判断是否是当天
calendar.dayTable[i+firstDay-1].id = 'today';
}
}
},
clearCalendar:function(form){ //清空TABLE方法
this.dayTable = form.getElementsByTagName('td');
for(var i = 0;i < this.dayTable.length;i++){
this.dayTable[i].innerHTML = ' ';
this.dayTable[i].id = '';
}
},
init:function(form){ //主方法
this.dayTable = form.getElementsByTagName('td');
this.createCalendar(form,new Date());
var preMon = form.getElementsByTagName('th')[0];
var nextMon = form.getElementsByTagName('th')[2];
preMon.onclick = function(){ //当点击左按钮时,减去一个月,并重绘TABLE
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
}
nextMon.onclick = function(){ //当点击右按钮时,加上一个月,并重绘TABLE
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
}
}
}
window.onload = function(){
var calendars = document.getElementById('calendar');
calendar.init(calendars);
}
</script>
<table id="calendar" cellspacing="15">
<tr>
<th style="cursor:pointer;cursor:hand;">＜</th>
<th id="tittle" colspan="5"> </th>
<th style="cursor:pointer;cursor:hand;">＞</th>
</tr>
<tr id="days">
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
