王新阳

wangxinyang

使用原生JS修改css属性

修改style样式:
1. 通过document.styleSheets[n] // n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到该样式表的css内容,通过style修改特定样式;
2. 修改特定元素节点的style内容cssText可以一次性修改多个css属性style.attrName 修改单个属性 attrName的值
3. 通过setAttribute 修改style属性值

<style>
.test {font-size: 30px;color: blue;background-color: blueviolet}
</style>
// html
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
// js
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式: 
stylesheetBtn.addEventListener('click', function(e) {
    var stylesheet = document.styleSheets[0];
    stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
    testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
    testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
    testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false);


关于运营-提到好多关键点

请输入查看密码:

基于CC0协议可以免费商用的图片站

隐藏video标签的下载

Chrome/360浏览器极速模式有效

参考:

https://googlechrome.github.io/samples/media/controlslist.html
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList

除了加 controlslist="nodownload" 还要屏蔽鼠标右键 oncontextmenu="return false;"
最简单的屏蔽,只要使用html5视频此问题目前就无解

<video controls controlslist="nodownload" id="video" src="" oncontextmenu="return false;"></video>

<video controls controlslist="nodownload nofullscreen noremoteplayback" id="video" src=""></video>

ajax上传-基于html5 FormData的批量文件上传

参考:https://www.cnblogs.com/imwtr/p/5924042.html
转自:https://blog.csdn.net/sinat_34492035/article/details/80477858

不使用FormData,直接用 <input type="file" name="file" multiple> 也可以实现批量上传。本例是ajax方式多个文件同时上传,也可以基于FormData采用ajax循环上传多个文件。更多功能可通过理解下面的原理自行扩展。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{
            list-style:none;
        }
        ul{
            width:700px;
            border:2px solid red;
            padding:10px;
        }
        .clearfix:after{
            display: block;
            content:'';
            overflow: hidden;
            visibility: hidden;
            clear: both;
            height:0;
        }
        .content ul li{
            float:left;
            width:100px;
            height:100px;
            margin:0 10px;
            border:1px solid #ccc;
        }
        .addFile{
            background:url("../img/icon12.png") no-repeat;
            background-position: center center;
        }
        #attach{
            width:100%;
            height:100%;
            opacity:0;
        }
    </style>
</head>

<body>
    <form action="formData_test.php" id="form">
        <div class="content">
            <ul class="clearfix ul-box">
                <li class="addFile">
                    <input type="file" id="attach"  multiple require />
                </li>
            </ul>
        </div>
        <input type="text" name="name"/>
        <input type="text" name="age"/>
        <input type="text" name="sex"/>
        <input type="button" value="上传" class="subBtn"/>
    </form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    //定义一个数组 把文件数组的值给新数组  对新数组进行操作  然后把新数组传递给后台
    var curFiles = [];
    $("#attach").change(function(){
        var fileArr = $(this)[0].files;
        Array.prototype.push.apply(curFiles, fileArr);
//      var fileArr = this.files;
        console.log(fileArr);
        //这里展示的话  还是用fileArr
        for(var i=0;i<fileArr.length;i++){
            console.log(fileArr[i]);
            var item = fileArr[i];
            var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+
                    "<p>大小:"+(item.size/1024).toFixed(2)+"KB</p></li>");
            $(".ul-box").prepend(abc);
        }
//      fileArr.map(function(item,index,arr){
//          var abc=$("<li><p>文件名:"+item.name+"</p>"+
//                  "<p>大小:"+parseInt(item.size/1024)+"KB</p></li>");
//          $(".ul-box").prepend(abc);
//      })

})  
$(".ul-box").on("click",".showf",function(){
    var index = $(".showf").index($(this));
    alert(index);
    var name = $(this).find("p").eq(0).html();
    console.log(curFiles);
//  curFiles = curFiles.filter(function(file) {
//      return file.name != name;
//  });
    curFiles.splice(index,1)
    console.log(curFiles);

    $(this).remove();
})
$(".subBtn").click(function(){
    // 构建FormData对象
    var fd = new FormData($('#form')[0]);
    for (var i = 0, j = curFiles.length; i < j; ++i) {
        fd.append('attach[]', curFiles[i]);
    }

    for(var pair of fd.entries()) {
       console.log(pair[0]+ ', '+ pair[1]); 
    }

    $.ajax({
        url: 'formData_test.php',
        type: 'post',
        data: fd,
        processData: false,
        contentType: false,
        success: function(rs) {
            console.log(rs);
        },
        error: function(err) {
        }
    });
})
</script>

</html>

formData_test.php源码:

<?php
$files = $_FILES['attach'];
var_dump($files);
?>

上传前图片预览

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="file">
<script>
$('input[type=file]').change(function(){
    var file=this.files[0];
    var reader=new FileReader();
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url=reader.result;
        setImageURL(url);
    };
    reader.readAsDataURL(file);
});

var image=new Image();
function setImageURL(url){
    image.src=url;
}
$(image).appendTo($('body'));
</script>


好久不见-WZJ

请输入查看密码:

SSL证书安装视频教程

阿里云视频教程:https://help.aliyun.com/video_list/54214.html

IIS
https://help.aliyun.com/video_detail/54215.html
https://cloud.video.taobao.com/play/u/2884690646/p/1/e/6/t/1/216811758772.mp4
下载数字证书中的pfx和txt文件》开始》运行》mmc》文件》添加/删除管理单元》可用的管理单元:证书》添加》计算机账户》本地计算机》完成》控制台根节点》证书》个人》右键》所有任务》导入》导入下载的pfx格式数字证书》输入证书密码(pfx-password.txt中的内容),选中"标志此密钥为可导出的密钥"和"包括所有扩展属性"》根据证书类型,自动选择证书存储》导入完成》个人-证书中查看是否已导入》中间证书颁发机构-证书中查看是否已导入》打开IIS》在根节点的"服务器证书"中可看到导入的证书》网站》绑定域名》类型https,端口443,输入主机名,选中”需要服务器名称指示“,选择SSL证书》确定!

IIS绑定域名最后一步,如果不选中”需要服务器名称指示“,以后再给同一主机上其他网站绑定数字证书时,可能会出现”至少一个其他网站在使用同一https绑定……“的提示,如果继续执行,会导致前面绑定数字证书的网站无法访问。

Nginx
https://help.aliyun.com/video_detail/54216.html
https://cloud.video.taobao.com/play/u/2884690646/p/1/e/6/t/1/216768529401.mp4

Tomcat
https://help.aliyun.com/video_detail/54217.html
https://cloud.video.taobao.com/play/u/2884690646/p/1/e/6/t/1/216721068939.mp4

百度经验:https://jingyan.baidu.com/article/455a9950a95aa3a1662778da.html

http访问跳转至https

网站安装SSL证书后,未https访问根据端口判断,并自动转至https

if($_SERVER['SERVER_PORT']=='80'){
    header("Location: https://www.abc.com".$_SERVER['REQUEST_URI']);
    exit;
}

增加对域名的判断

switch(strtolower($_SERVER['SERVER_NAME'])){
    case 'abc.com':
        if($_SERVER['SERVER_PORT']=='80'){
            header("Location: https://www.abc.com".$_SERVER['REQUEST_URI']);
            exit;
        }
        break;
}

对是否为https方式访问的判断,不能单纯靠 $_SERVER['SERVER_PORT']=='80
建议方法:

function is_https() {
	if(isset($_SERVER['SERVER_PORT']) && $_SERVER['SERVER_PORT']==='443'){
		return true;
	}elseif( !empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) !== 'off'){
		return true;
	}elseif( !empty($_SERVER['HTTP_FROM_HTTPS']) && strtolower($_SERVER['HTTP_FROM_HTTPS']) !== 'off'){ //西部数码
		return true;
	}else{
		return false;
	}
}

使用.htaccess重定向

RewriteEngine On
RewriteCond %{HTTP:From-Https} !^on$ [NC]
RewriteCond %{HTTP_HOST} ^(www.)?abc.com$ [NC]
RewriteRule ^(.*)$ https://www.abc.com/$1 [R=301,L]


发生未知 FastCGI 错误 ,错误代码为0x8007010b

给PHP目录添加USER的读取和执行权限即可
如果php临时目录位于PHP安装目录,还要加上修改权限


发生未知 FastCGI 错误 ,错误代码为0x8007010b,最可能的原因: 

IIS 收到了请求;但在处理请求过程中出现内部错误。此错误的根本原因取决于处理该请求的是哪一个模块以及出现此错误时工作进程中出现了何种情况。 
IIS 无法访问网站或应用程序的 web.config 文件。如果 NTFS 权限设置不正确,便会出现这种情况。 
IIS 无法处理网站或应用程序的配置。 
已经过身份验证的用户没有使用此 DLL 的权限。 
该请求将被映射到托管处理程序,但不会安装 .NET 可扩展功能。 
 
可尝试的操作: 
确保 web.config 文件的 NTFS 权限正确,并允许访问 Web 服务器的计算机帐户。 
检查事件日志中是否记录了任何附加信息。 
确认 DLL 的权限。 
如果请求被映射到托管处理程序,则安装 .NET 可扩展功能。 
创建跟踪规则以跟踪此 HTTP 状态代码的失败的请求。有关为失败的请求创建跟踪规则的详细信息,请单击此处。 
 
详细错误信息: 
模块       FastCgiModule 
通知       ExecuteRequestHandler 
处理程序       PHP 
错误代码       0x8007010b 
请求的 URL        
物理路径       C:\inetpub\wwwroot\abc\index.php 
登录方法       匿名 
登录用户       匿名 
2025-11-06 星期四 农历九月十七