vue+html5+css制作日历代码，工作日配置

已于 2024-04-26 16:13:48 修改
阅读量259 收藏 4
点赞数 3
分类专栏： 前端 数据库 script 文章标签： html html5 前端
于 2024-04-26 14:38:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42277412/article/details/138217200
版权
script 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
数据库
7 篇文章 0 订阅
订阅专栏
前端
3 篇文章 0 订阅
订阅专栏

目录

1.日历页面

2.工作日查询、自然日查询 js

3.修改工作日配置

4.数据库，表结构

5.初始化数据

因系统需要，需要制作一个功能--工作日配置。

需要的业务有：

1.初始化与国家放假情况一致，之后支持手动进行工作日配置；

2.展示12个月的放假/工作日情况；

3.一些特殊的日期，如调休、春节等需要进行展示。

页面展示：

修改页面：

1.日历页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header_css::header('工作日维护')"></head>
<style type="text/css">
.calendar-box * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.calendar-box {
    border: 1px solid #d2d2d2;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    background-color: #fff;
    color: #666;
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 272px;
    border-radius: 2px;
    font-size: 14px;
}
.calendar-content {
    position: relative;
    padding: 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.calendar-content table {
    border-collapse: collapse;
    border-spacing: 0;
}
.calendar-content th, .calendar-content td {
	border: 1px solid #d3d3d3;
    width: 36px;
    height: 30px;
    padding: 5px;
    text-align: center;
}
.calendar-content th {
    font-weight: 400;
    color: #333;
}
.calendar-content td {
    position: relative;
    cursor: pointer;
    transition-duration: .3s;
    -webkit-transition-duration: .3s;
}
.calendar-content td:hover {
    background-color: #eaeaea;
    color: #333;
}
.calendar-content .calendar-day-mark-td {
    height: 33px;
}
.calendar-day-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 33px;
    font-size: 12px;
    overflow: hidden;
}
.calendar-content .weekend {
    color: red;
}
.calendar-disabled {
    background: 0 0!important;
    cursor: not-allowed !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.calendar-workday {
    color: white;
    background-color: #080101;
}
.calendar-workday:hover {
    background-color: #080101b3;
}
.calendar-holiday {
    color: white;
    background-color: #f08a8a;
}
.calendar-holiday:hover {
    background-color: #f08a8aab;
}
</style>
<body>
<div id="dpLTE">
    <div class="row form-row">
        <div class="col-md-2 text-center text-muted">
        </div>
        <div class="col-md-3 text-right text-muted">
            请选择年份：
        </div>
        <div class="col-md-3 text-center text-muted">
            <select class="form-control" id="yearSelect"> </select>
        </div>
        <div class="col-md-4 text-center text-muted">
        	<a onclick="initDataByYear()" class="btn btn-default"><i class="fa fa-refresh"></i>&nbsp;初始工作日数据</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center text-muted">
            一月
        </div>
        <div class="col-md-3 text-center text-muted">
            二月
        </div>
        <div class="col-md-3 text-center text-muted">
            三月
        </div>
        <div class="col-md-3 text-center text-muted">
            四月
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center text-muted">
            <div id="month1"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month2"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month3"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month4"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 text-center text-muted">
            五月
        </div>
        <div class="col-md-3 text-center text-muted">
            六月
        </div>
        <div class="col-md-3 text-center text-muted">
            七月
        </div>
        <div class="col-md-3 text-center text-muted">
            八月
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 text-center text-muted">
            <div id="month5"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month6"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month7"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month8"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 text-center text-muted">
            九月
        </div>
        <div class="col-md-3 text-center text-muted">
            十月
        </div>
        <div class="col-md-3 text-center text-muted">
            十一月
        </div>
        <div class="col-md-3 text-center text-muted">
            十二月
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center text-muted">
            <div id="month9"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month10"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month11"></div>
        </div>
        <div class="col-md-3 text-center text-muted">
            <div id="month12"></div>
        </div>
    </div>

    <div class="row form-row" style="margin-top: 50px;">
        <div class="col-md-12 text-center text-muted">
            工作日查询
        </div>
    </div>

    <div class="row form-row">
        <div class="col-md-2 text-right text-muted">
            请选择日期：
        </div>
        <div class="col-md-2 text-center text-muted">
            <input class="form-control" id="dateSelect" type="text"/>
        </div>
        <div class="col-md-2 text-right text-muted">
            请输入工作日偏移天数：
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="days" type="number"/>
        </div>
        <div class="col-md-1 text-left text-muted">
            <a href="javascript:inputChange();" class="btn btn-primary">查询</a>
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="result" type="text" readonly="readonly"/>
        </div>
    </div>


    <div class="row form-row" style="margin-top: 50px;">
        <div class="col-md-12 text-center text-muted">
            自然日查询
        </div>
    </div>
    <div class="row form-row">
        <div class="col-md-2 text-right text-muted">
            请选择日期：
        </div>
        <div class="col-md-2 text-center text-muted">
            <input class="form-control" id="natureDateSelect" type="text"/>
        </div>
        <div class="col-md-2 text-right text-muted">
            请输入自然日偏移天数：
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="natureDays" type="number"/>
        </div>
        <div class="col-md-1 text-left text-muted">
            <a href="javascript:natureInputChange();" class="btn btn-primary">查询</a>
        </div>
        <div class="col-md-2 text-right text-muted">
            <input class="form-control" id="natureResult" type="text" readonly="readonly"/>
        </div>
    </div>

    <div class="row" style="margin-top: 50px;">

    </div>
</div>

<div th:include="include/footer_js::footer"></div>

<script type="text/javascript">
    $(function() {
        var year = formatDate(new Date(), 'yyyy');
        var data = {};
        var nextYear = year * 1 + 1;
        //下拉框范围：从2024年开始，到当前年份+1
        for (var i = 2024; i <= nextYear; i++) {
            data[i] = i;
        }

        // 初始化系统参数,选择年
        $('#yearSelect').selectBindEx({
            data: data,
            placeholder: '请选择年份',
            value: 'stringValue',
            text: 'name',
            allowClear: false,
            selected: [year],
            change: function (data) {
                initByYear(data);
            }
        });
        initByYear(year);

        laydate.render({
            elem: '#dateSelect',
            trigger: 'click',
            position: 'fixed',
            type: 'date',
            value: new Date(),
            format: 'yyyy-MM-dd'
        });

        laydate.render({
            elem: '#natureDateSelect',
            trigger: 'click',
            position: 'fixed',
            type: 'date',
            value: new Date(),
            format: 'yyyy-MM-dd'
        });

    });

    function initByYear(year) {
        var markDayData = [];
        $.SetForm({
            url: '../../system/workDay/listByYear?year=' + year + '&_=' + $.now(),
            param: {},
            async: false,
            success: function (data) {
                markDayData = data;
            }
        });

        // 月份
        for(var i = 1; i <= 12; i++) {

            // 渲染月份html结构
            renderMonthHtml(i);

            // 表格中显示日期
            showCalendarData(year, i, markDayData);
        }
    }

    /**
     * 渲染月份html结构
     */
    function renderMonthHtml(month) {
        var calendar = $('#month' + month);

        calendar.empty();

        // 设置表格区的html结构
        var _theadHtml = '<thead>' +
            '<tr>' +
                '<th class="weekend">日</th>' +
                '<th>一</th>' +
                '<th>二</th>' +
                '<th>三</th>' +
                '<th>四</th>' +
                '<th>五</th>' +
                '<th class="weekend">六</th>' +
            '</tr>' +
        '</thead>';

        // 一个月最多31天，所以一个月最多占6行表格
        var _tbodyHtml = '<tbody>';
        for(var i = 0; i < 6; i++) {
            _tbodyHtml += '<tr>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
                '<td></td>' +
            '</tr>';
        }
        _tbodyHtml += '</tbody>';

        // 表格div
        var _boxHtml = '<div class="calendar-box">' +
            '<div class="calendar-content">' +
                '<table>' +
                _theadHtml +
                _tbodyHtml +
                '</table>' +
            '</div>' +
        '</div>';

        // 添加到节点中
        calendar.html(_boxHtml);
    }

    /**
     * 表格中显示数据，并设置类名
     */
    function showCalendarData(year, month, markDayData) {

        // 设置表格中的日期数据
        var _table = $('#month' + month + ' table');
        var _tds = _table.find("td");
        var _firstDate = new Date(year, month - 1, 1);  // 当前月第一天
        for(var i = 0; i < _tds.length; i++) {
            var _td = $(_tds[i]);
            var _markHtml = '<span>&nbsp;</span>';

            // 日期编号
            // < 0，代表是上个月的日期
            // > 0，代表是这个月的日期
            // > 31，代表是下个月的日期，如1月有31天，超过31号的，是下个月2月
            var dayNumber = i + 1 - _firstDate.getDay();

            var _thisDate = new Date(year, month - 1, dayNumber); // 当前日期
            var _thisDateStr = formatDate(_thisDate, 'yyyy-MM-dd'); // 格式化，年月日
            var day = _thisDate.getDate(); // 当前日期，几号

            // 不可点击（默认）
            _td.addClass("calendar-disabled");
            _td.html(_markHtml);

            // 只显示当前月
            if (_thisDate.getMonth() == month - 1) {
                _markHtml = '<span>' + day + '</span>';
                _td.html(_markHtml);

                _td.removeClass("calendar-disabled"); //可点击
                _td.attr('id', _thisDateStr); // id，年月日
                _td.attr('title', _thisDateStr);
                _td.attr('year', year); // 年
                _td.attr('month', month); // 月
                _td.attr('day', day); // 日
                _td.attr('onclick', 'editDay(this)');

                // 特殊日期
                for (var j = 0; j < markDayData.length; j++) {
                    var mItem = markDayData[j];
                    var mdate = mItem.year + '-' + mItem.month + '-' + mItem.day;

                    // 日期一致
                    if (_thisDateStr == mdate) {
                        _td.addClass("calendar-day-mark-td");

                        // 存在特殊日期名称
                        if (mItem.name) {

                            if (mItem.type == 1) {
                                // 工作日
                                _markHtml = '<span class="calendar-day-mark calendar-workday">' + mItem.name + '</span>';
                                _td.html(_markHtml);

                            } else if (mItem.type == 2) {

                                // 节假日
                                _markHtml = '<span class="calendar-day-mark calendar-holiday">' + mItem.name + '</span>';
                                _td.html(_markHtml);
                            }
                        }

                        break;
                    }
                }

            }
        }
    }

    function editDay(obj) {
        var id = $(obj).attr('id');
        var year = $(obj).attr('year');

        dialogOpen({
            title: '修改工作日配置',
            url: 'system/workDay/workDayEdit.html?_' + $.now(),
            width: '600px',
            height: '400px',
            scroll : true,
            success: function(iframeId){
                top.frames[iframeId].vm.workDay.id = id;
                top.frames[iframeId].vm.setForm();
            },
            yes : function(iframeId) {
                // 子页面传值到父页面
                var result = top.frames[iframeId].vm.acceptClick();
                if (result) {
                    var temp = {};
                    Object.assign(temp, result);

                    $.ConfirmForm({
                        url: '../../system/workDay/saveWorkDay?_=' + $.now(),
                        param: temp,
                        close : false,
                        success: function(data) {
                            initByYear(year);
                            dialogCloseById(iframeId);
                        }
                    });
                }
            }
        });
    }

    function initDataByYear() {
        var year = $('#yearSelect').val();
        
        $.ConfirmForm({
            msg: '您是否要初始'+year+'年工作日数据？',
            url: '../../system/workDay/initDataByYear?year=' + year + '&_=' + $.now(),
            param: {},
            async: false,
            success: function (data) {
                initByYear(year);
            }
        });
    }

    function inputChange() {
        var result = getWorkDayAfterByDate($("#dateSelect").val(), $("#days").val());
        $("#result").val(result);
    }

    function natureInputChange() {
        var result = dateAddDays($("#natureDateSelect").val(), $("#natureDays").val());
        $("#natureResult").val(result);
    }

</script>
</body>
</html>

2.工作日查询、自然日查询 js


/**
 * [dateAddDays 从某个日期增加n天后的日期]
 * @param  {[string]} dateStr  [日期字符串]
 * @param  {[int]} dayCount [增加的天数]
 * @return {[string]}[增加n天后的日期字符串]
 */
function dateAddDays(dateStr,dayCount) {
	var tempDate=new Date(dateStr.replace(/-/g,"/"));//把日期字符串转换成日期格式
	var resultDate=new Date((tempDate/1000+(86400*dayCount))*1000);//增加n天后的日期
	return formatDate(resultDate, "yyyy-MM-dd");
}

/**
 * 查询工作日
 * @param date 时间，格式：yyyy-MM-dd，为空将使用当前时间
 * @param days 偏移量，整数，为正向后偏移，为负向前偏移
 * @returns {*}
 */
function getWorkDayAfterByDate(date, days) {
    if (isNullOrEmpty(date)) {
        date = formatDate(new Date(), 'yyyy-MM-dd');
    }
    if (isNullOrEmpty(days)) {
        return;
    }
    var result;
    $.SetForm({
        url: '../../system/workDay/getWorkDayAfterByDate?date=' + date + '&days=' + days + '&_=' + $.now(),
        param: {},
        async: false,
        success: function (data) {
            result = data;
        }
    });
    return result;
}

3.修改工作日配置

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header_css::header('编辑-工作日配置')"></head>
<body>
	<div id="dpLTE" class="container-fluid" v-cloak>
		<table class="form" id="form">
			<colgroup>
				<col width="20%" />
			</colgroup>
			<tr>
				<td class="formTitle">日期</td>
				<td class="formValue">{{ workDay.year }}-{{ workDay.month }}-{{ workDay.day }}</td>
			</tr>
			<tr>
				<td class="formTitle">工作日名称</td>
				<td class="formValue">
					<input v-model.trim="workDay.name" type="text" class="form-control" placeholder="请输入工作日名称" errormsg="工作日名称" />
				</td>
			</tr>
			<tr>
				<td class="formTitle">备注</td>
				<td class="formValue">
					<input v-model.trim="workDay.descn" type="text" class="form-control" placeholder="请输入备注" errormsg="备注" />
				</td>
			</tr>
			<tr>
				<td class="formTitle">工作日类型</td>
				<td class="formValue">
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="0" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 工作日
					</label> 
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="1" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 周末
					</label> 
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="2" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 节日
					</label>
					<label class="radio-inline">
						<input type="radio" name="holidayType" value="3" v-model="workDay.holidayType" isvalid="yes" checkexpession="NotNull"/> 调休
					</label>
				</td>
			</tr>
		</table>
	</div>
	<div th:include="include/footer_js::footer"></div>
	<script type="text/javascript">
	var vm = new Vue({
		el:'#dpLTE',
		data: {
			workDay: {
				id: null,
				year: null,
                month: null,
                day: null,
                holidayType: 0,
			}
		},
		methods : {
			setForm: function() {
			    var param = {
					id: vm.workDay.id
			    };
				$.SetForm({
					url: '../../system/workDay/getInfoByDate?_' + $.now(),
			    	param: param,
			    	success: function(data) {
			    	    if (data) {
				    		vm.workDay = data;
			    	    }
			    	}
				});
			},
			acceptClick: function() {
				if (!$('#form').Validform()) {
			        return false;
			    }
				
				return vm.workDay;
			}
		}
	})

	</script>
</body>
</html>

4.数据库，表结构

工作日配置表
字段名类型长度主键注释
idvarchar36是

主键id

年月日拼接

如：2024-01-01

yearvarchar10否年份
monthvarchar2否月份
dayvarchar2否天
namevarchar200否名称
weekint2否星期几（1-7）
week_meanvarchar20否

星期几（1-7）

文本，如：星期一

typeint2否

类型

1：工作日

2：非工作日/节假日

默认为工作日

holiday_typeint2否

节假日类型：

0：工作日

1：周末

2：节日

3：调休

oper_user_idvarchar36否操作用户id
descnvarchar200否备注
cdatedatetime0否创建时间
ldatedatetime0否修改时间
statusint2否

状态：

1：有效

0：无效

 sql脚本：

CREATE TABLE `t_work_day` (
  `id` varchar(36) NOT NULL COMMENT '主键id',
  `year` varchar(10) DEFAULT NULL COMMENT '年份',
  `month` varchar(2) DEFAULT NULL COMMENT '月份',
  `day` varchar(2) DEFAULT NULL COMMENT '天',
  `name` varchar(200) DEFAULT NULL COMMENT '名称',
  `week` int(2) DEFAULT NULL COMMENT '星期几（1-7）',
  `week_mean` varchar(20) DEFAULT NULL COMMENT '星期几（1-7）',
  `type` int(2) DEFAULT NULL COMMENT '类型（1：工作日；2：非工作日/节假日；默认为工作日）',
  `holiday_type` int(2) DEFAULT NULL COMMENT '节假日类型:0工作日、1周末、2节日、3调休',
  `oper_user_id` varchar(36) DEFAULT NULL COMMENT '操作用户id',
  `descn` varchar(200) DEFAULT NULL COMMENT '备注',
  `cdate` datetime DEFAULT NULL COMMENT '创建时间',
  `ldate` datetime DEFAULT NULL COMMENT '修改时间',
  `status` int(2) DEFAULT NULL COMMENT '状态',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `year_month_day` (`year`,`month`,`day`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='工作日配置表';

数据如下：

5.初始化数据

工作日数据由第三方初始化获取 ，参考：

工作日API文档：http://timor.tech/api/holiday

木辰風
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
编写一个带日程的日历
07-09
如何从零编写一个日历，方法有很多种，这是一种新奇的实现方式，并且，他可以给指定日期添加日程。
Vue+el-popover+原生JS+CSS实现日历功能
VVVVV
10-28 532
效果展示 功能 固定位置展示星期(日/一/二/三/四/五/六) 固定位置切换年份，重绘日历 滚动展示完整日历 自动滚动到离当天最近有数据的一天，若全年无数据则滚动至当天 在日期下方动态添加小红点表示该天有数据，悬停展示当天数据概览，点击可高亮该日期 实现思路 实现固定位置与滚动 容器定高，用于展示滚动 修改滚动条样式，适配颜色 header采用绝对定位固定 body日期区域用绝对定位，与header固定位置保持距离 body区域定高，展示滚动条 拆解后元素结构如图所示： 实现高亮与悬停展示
《Vue3+Typescript》一个简单的日历组件实现
热门推荐
Oliver尹的博客
07-29 1万+
近来项目中需要用到一个日历组件，由于找了找没有找到合适的，因此决定自己简单动手做一个，项目中肯定比这个复杂的多，这里只是给各个小伙伴一个思路或者说是开发的方向～
vue3日历时间 vite + vue3 日历时间
_2333
04-17 3128
vite + vue3日历时间 #vue3 Calendar组件 日历组件 选择vite + vue3
VUE Calendar 用VUE+ElementUI实现带农历 节气 节日 日期的日历
_2333
11-28 2701
VUE Calendar 用VUE+ElementUI实现带农历 节气 节日 日期的日历
Vue + ant日历组件calendar 自定义渲染
KBK2020的博客
06-27 1057
kbk使用ant日历组件calendar中 需要实现：1.日历头部是英文模式，并且可以自定义header标题2. 在特殊的时间里进行标记3. 特殊时间段发生事件次数不一致，样式也进行变化。
【Java-SpringBoot+Vue+MySql】Day4-VUE框架使用
欢迎来到代码骑士的秘密基地
06-22 1258
前期基础语法，我们通过链接的方式使用vue，后面会用npm进行安装。基础语法，vue2和vue3区别不大，但是后面路由会有很大区别。v-html指令的作用是：设置元素的innerHTML。安装插件open in browser。安装Live Serve插件能同步刷新。频繁判断用v-show性能更高。通过 CDN 使用 Vue。代码页面右键在浏览器打开。
html5日历保持下拉状态,vue日历/日程提醒/html5本地缓存功能
weixin_29830257的博客
06-04 466
先上图功能：1、上拉日历折叠，展示周2、左右滑动切换月2、“今天”回到今天；“+”添加日程3、localStorage存储日程index,html+{{ currentYear }}-{{currentMonth}}今天日一二三四五六 //移动端点击方法，可切换pc端点击方法，见下{{ day.getDate() }}{{ day.getDate() }}{{ day.getDate() }} /...
干货分享---记录一次vue +element-ui+ FullCalendar日历表 实现排班/排课的功能
weixin_45279761的博客
07-06 9421
先上效果图 1.安装，因产品需求，只需要显示天视图和周 视图。 npm install --save "@fullcalendar/core" npm install --save "@fullcalendar/interaction" npm install --save "@fullcalendar/timegrid" npm install --save "@fullcalendar/vue" 2.引入 import FullCalendar from "@fullcalendar/vue";
vue+element 实现日历完整代码
03-30
vue+element 实现日历完整代码
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
基于Vue+JavaScript+HTML+CSS的电子档案管理系统（源码+说明文档）.rar
06-28
1、资源内容：基于Vue+JavaScript+HTML+CSS的电子档案管理系统（源码+说明文档）.rar 2、适用人群：计算机，电子信息工程、数学等专业的学习者，作为“参考资料”参考学习使用。 3、解压说明：本资源需要电脑端使用...
vue+elementUI实现简单日历功能
10-14
主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
electron 桌面程序开发，兼容react+vue+html+css+js
01-08
electron 桌面程序开发，兼容react+vue+html+css+js
SpringBoot+MyBatisPlus+Vue+ElementUI实现前后端分离的物业管理系统
程序员小王的博客
06-15 6550
我想设计一套当前潮流的前后端分离项目，前台主要使用ｖue作为开发语言，饿了么公司的ElementUI框架作为前端框架，后台使用MySQL作为数据库管理系统，SpringBoot＋MyBatisPlus作为后端框架，设计开发了小区物业管理系统......
网页html版面分析-- BeauifulSoup（python 文档解析提取）
最新发布
消极的人永远是对的，积极的人选择勇往直前
05-06 221
介绍 BeauifulSoup 是一个可以从HTML或XML 文件中提取数据的python库；它能通过转换器实现惯用的文档导航、查找、修改文档的方式。 BeauifulSoup是一个基于re开发的解析库，可以提供一些强大的解析功能；使用BeauifulSoup 能够提高提取数据的效率与爬虫开发效率。 安装 pip install beautifulsoup4 使用 1 构建文档树 BeauifulSoup 进行文档解析是基于文档树结构来实现的，而文档树则是由BeauifulSoup 中的四个数据对象构
【记录】Python3｜ 将 PDF 转换成 HTML/XML（✅⭐⭐⭐⭐pdf2htmlEX）
qq_46106285的博客
05-01 829
总体来说，PDF2HTMLEX 是一款非常优秀的 PDF 转 HTML 工具。尽管在处理文件路径时存在一些小问题，但这并不影响其出色的转换效果。
nuxt3使用记录六：禁用莫名其妙的Tailwind CSS(html文件大大减小)
lsjweiyi的博客
04-29 476
平时没注意看，这时候看，猜测是nuxt的默认配置就会加载这玩意，关键我想不明白一个css，为啥要默认加载呢？下面那个style，也不是我写的，我试着删掉，发现对项目也没影响，而且也是每个html文件都有。看到是跳过了这玩意，所以nuxt3这玩意，还有很多可以琢磨的地方，50k star的成熟项目也有不成熟的地方嘛。然后我记得在官网看过它，去搜索，果然，这些nuxt自带的一个样式，不过没说为啥要引用他。发现这个问题是因为，今天我突然很好奇，我发现之前构建的自动产生的。我全局搜索我的项目，都没有引用这玩意！
vue+html+css设计登录页面
05-22
好的，以下是一个简单的登录页面的 Vue、HTML 和 CSS 代码示例： Vue 代码： ``` <template> <div class="login"> <h1>Login</h1> <form> <label for="username">Username:</label> <input type="text" id="username" v-model="username" required> <label for="password">Password:</label> <input type="password" id="password" v-model="password" required> <button type="submit" @click.prevent="login">Login</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 进行登录操作 } } } </script> <style> .login { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } h1 { font-size: 36px; margin-bottom: 30px; } form { display: flex; flex-direction: column; align-items: center; } label { font-size: 18px; margin-top: 20px; } input { width: 300px; height: 40px; font-size: 18px; padding: 5px 10px; margin-top: 10px; border: none; border-radius: 5px; } button { width: 100px; height: 40px; font-size: 18px; margin-top: 20px; border: none; border-radius: 5px; background-color: #007bff; color: #fff; cursor: pointer; } </style> ``` HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>Login Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="app"> <login></login> </div> <script src="https://unpkg.com/vue@next"></script> <script src="main.js"></script> </body> </html> ``` CSS 代码： ``` body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; } #app { display: flex; justify-content: center; align-items: center; height: 100vh; } .login { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } h1 { font-size: 36px; margin-bottom: 30px; } form { display: flex; flex-direction: column; align-items: center; } label { font-size: 18px; margin-top: 20px; } input { width: 300px; height: 40px; font-size: 18px; padding: 5px 10px; margin-top: 10px; border: none; border-radius: 5px; } button { width: 100px; height: 40px; font-size: 18px; margin-top: 20px; border: none; border-radius: 5px; background-color: #007bff; color: #fff; cursor: pointer; } ``` 以上代码仅为示例，你可以根据需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值