奇怪的web前端开发技巧 `更新中`

Tips

这篇文章是对于web网站建设的一些小surprise，在你了解它们之前你应该对HTML，CSS，JS，JQuery的基本认识！

软件篇

VScode

当然是我最爱的VScode啦：https://code.visualstudio.com/

它有非常非常丰富的插件，使得它可以帮你做除生孩子外的各种事情🤪

Hbuilder

官网：https://www.dcloud.io/hbuilderx.html

我很少用它写前端，但它写markdown挺爽。但主要是我们班妹子只会这玩意

库的引用

JQuery CDN
1
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
jquery似乎有点过时了，但不可否认的是它曾经的辉煌。现在更多的是Vue等框架虚拟操作DOM

Vue
1
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
它的中文文档

animate CDN
1
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css">
舒服的css动画库，一个顶俩😝

HTML部分代码

水平居中DIV

对父DIV设置属性:

1	text-align: center;

对需要居中的div设置:

1	margin: 0 auto;

input实现自定义搜索功能

首先需要一个id为wd的input输入框:

1	<input type="search" placeholder="快捷搜索" onkeydown="calAge(event)" id="wd">

javascript代码：

<script>
    //回车调用
    function calAge(e) {
        var evt = window.event || e;
        if (evt.keyCode == 13) {
            // 调用搜索函数
            entersearch();
        }
    }
    //end
    function entersearch() {
        var inpCont = $("#wd").val();
        if (inpCont.replace(/(^\s*)|(\s*$)/g, "") == "") { //----判断是否为空或者空格---
            alert("搜索不能为空！");
            return; //------如果为空，阻止函数继续往下执行----          
        } else {
            //加载新的链接
            window.open("链接" + $('#wd').val());
        };
    }
</script>

实现一言功能，支持自定义内容

首先需要一个class为yiyan的p标签

<script type='text/javascript'>
    $.get("https://word.rainss.cn/api_users.php?userid=188&type=txt&source=true", function(content, status) {
        content = content.replace(/——/g, ' ');//字符串转换
        if (status == 'success') {
            $('.yiyan').text(content);
        } else {
            $('.yiyan').text('我...没找到😶');
        }
    });
</script>

可以将get请求换为自己的，语录注册：https://word.rainss.cn/user/

上述代码适用类型为纯文本，显示作者，且过滤了字符。

遮罩层

鼠标放上去显示蒙版，移开消失

Jquery实现很简单

先引用Jquery

1	<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

核心Jquery代码

jQuery(document).ready(function() {
    $("选择器").hover(function() {
        $("蒙版选择器").css("display", "none")
    }, function() {
        $("蒙版选择器").css("display", "block")
    });
});