页面相关

页面相关 业，精于勤荒于嬉.

发表日期：2022-08-22 09:21:25 | 来源： | 分类：页面相关

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>养老金测算</title>
    <meta name="keywords" content="养老金测算|退休工资预估" />
    <meta name="description" content="养老金测算|退休工资预估" />
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<body>


<div style="background-color: #eacccc">
</div>
<div style="background-color: #a8d27e">
    <h4>计算公式为：</h4>
    <hr>
    <p>个人账户养老金=个人账户余额/139 粗算=（月工资*缴费比例*12月*缴费年限）/139</p>
    <p>基础养老金=(上年度全市平均工资+个人缴费工资)/2*缴费年限*1%</p>
    <p>月退休工资估算=个人账户养老金 +基础养老金 </p>
</div>
<hr>
<b>请输入：</b>
<br>月缴费基数：<input type="text" name="gz" value="10000">
<br> 缴费年限：<input type="text" name="nx" value="15">
<br> 缴费比例：<input type="text" name="bl" value="8">%
<br> 上年度全市平均工资：<input type="text" name="pj" value="7073">% <br>
<hr>

<div style="background-color: #b0a5e3">
    <h4>计算结果为：</h4>
    <hr>
    <p>个人账户养老金=（<span class="gz"></span>*<span class="bl"></span>%*12*<span class="nx"></span>）/139 = <span class="gr"></span></p>
    <p>基础养老金=(<span class="pj"></span>+<span class="gz"></span>)/2*<span class="nx"></span>*1%=<span class="jc"></span></p>
    <p>月退休工资估算=<span class="gr"></span> +<span class="jc"></span> = <span class="gs"></span></p>
    </p>
</div>


<h3>本测算只是预估个大概并不是准确的，且缴费基数、市平均工资、政策每年都会有浮动调整，谁也不可能几十年同一个基数缴费，仅供参考娱乐。</h3>

<script>

    function ab() {
        var gz = $("input[name=gz]").val() * 1;
        var nx = $("input[name=nx]").val() * 1;
        var bl = $("input[name=bl]").val() * 1;
        var pj = $("input[name=pj]").val() * 1;
        var gr = (gz * bl/100 *12 * nx / 139).toFixed(2) * 1;
        var jc = ((pj + gz) / 2 * nx * 0.01).toFixed(2) * 1;
        var gs = (gr + jc) .toFixed(2)

        $(".pj").text(pj);
        $(".gz").text(gz);
        $(".nx").text(nx);
        $(".bl").text(bl);
        $(".gr").text(gr);
        $(".jc").text(jc);
        $(".gs").text(gs);
    }

    ab();

    $("input").keyup(ab)


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

阅读全文 »

页面相关 canvas笔记

发表日期：2022-08-22 09:18:53 | 来源： | 分类：页面相关

示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #imooc{
            border:1px solid #ccc;
            /*width: 800px;*/
        }
    </style>
</head>
<body>

<canvas id="imooc" width="800" height="800"></canvas>

<script>
    // 根据id属性获取到canvas标签
    const canvas = document.getElementById('imooc');

    // 获取到canvas的 渲染上下文, 渲染上下文的概念后面有讲到
    const ctx = canvas.getContext('2d');


    ctx.fillStyle = 'orange';
    ctx.fillRect(10, 10, 100, 100);
    ctx.stroke();


    // 打线笔移动到起点
    ctx.moveTo(5,5);
    // 开始描线到终点
    ctx.lineTo(80,30);
    // 选择绿色的画笔
    ctx.strokeStyle="red";
    // 开始用画笔描边
    ctx.stroke();

    ctx.beginPath();
    //绘制第一条线段
    ctx.moveTo(10,10);
    ctx.lineTo(100,50);
    ctx.lineTo(200,10);
    ctx.strokeStyle="red";
    ctx.lineWidth=4;       //设置线段宽度为4px
    ctx.stroke();

    ctx.beginPath();
    //绘制第二条线段
    ctx.moveTo(10,30);
    ctx.lineTo(100,70);
    ctx.lineTo(200,30);
    ctx.strokeStyle="green"
    ctx.lineWidth=5;       //设置线段宽度为5px
    ctx.stroke();

    ctx.beginPath();
    //绘制第三条线段
    ctx.moveTo(10,50);
    ctx.lineTo(100,100);
    ctx.lineTo(200,50);
    ctx.strokeStyle="blue"
    ctx.lineWidth=6;       //设置线段宽度为6px
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(250,10);
    ctx.lineTo(250,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,10);
    ctx.lineTo(250,10);
    ctx.closePath();
    ctx.strokeStyle="blue"
    ctx.lineWidth=8
    ctx.stroke();

    ctx.rect(350,10,300,100);
    ctx.strokeStyle = "hlsa(60,50%,50%,0.5)"
    ctx.fillStyle = "hlsa(60,50%,50%,0.5)"
    ctx.fill();
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.rect(10,200, 100,100)
    let lg = ctx.createLinearGradient(10,100, 110,100) // 1. 创建渐变线
    lg.addColorStop(0, "#ff0000")    // 2. 设定关键点
    lg.addColorStop(0.5, "#fff")  // 2. 设定关键点
    lg.addColorStop(1, "#000")    // 2. 设定关键点
    ctx.fillStyle = lg;           // 3. 填充应用渐变线
    ctx.fill();


    ctx.beginPath();
    ctx.rect(200,200, 100,100)
    let lg1 = ctx.createLinearGradient(200,300, 300,300) // 1. 创建渐变线
    lg1.addColorStop(0, "#ff0000")    // 2. 设定关键点
    lg1.addColorStop(0.5, "#fff")  // 2. 设定关键点
    lg1.addColorStop(1, "#000")    // 2. 设定关键点
    ctx.strokeStyle = lg1;           // 3. 填充线性渐变
    ctx.stroke();


    ctx.beginPath();
    ctx.rect(350,200, 100,100)
    let lg2 = ctx.createRadialGradient(400,250,0,400,250,50) // 1. 创建径向渐变线
    lg2.addColorStop(0, "#ff0000")    // 2. 设定关键点
    lg2.addColorStop(0.5, "#fff")  // 2. 设定关键点
    lg2.addColorStop(1, "rgba(0,0,0,1)")    // 2. 设定关键点
    ctx.fillStyle = lg2;           // 3. 填充应用渐变线
    ctx.fill();

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

阅读全文 »

页面相关 replaceAll 实现字符串替换全部方法

发表日期：2021-07-01 15:08:40 | 来源： | 分类：页面相关

示例1

//最新的谷歌等浏览器内核内置了replaceAll 方法，如果没有的话使用自己实现的
if (typeof String.prototype.replaceAll !== "function"){
    String.prototype.replaceAll = function (reg, str) {
        var flags = 'g';
        if (Object.prototype.toString.call(reg).toLowerCase() === '[object regexp]') {
            // 传入的是正则
            if (reg.global) {
                return this.replace(reg, str);
            } else {
                flags += (reg.ignoreCase ? 'i' : '') + (reg.multiline ? 'm' : '');
                reg = reg.source;// 获取正则源码
            }
        } else {
            reg = reg.replace(/([\*\[\]\{\}\-])/g, "\\$1");
        }
        return this.replace(new RegExp(reg, flags), str);
    }
}

阅读全文 »

页面相关浏览器缓存详解:expires,cache-control,last-modif: 发表日期：2015-01-04 10:03:24 | 来源： | 分类：页面相关; 1、Last-Modified
在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(HttpReponse Header)此文件在服务期端最后被修改的时间，格

式类似这样：
Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT
客户端第二次请求此URL时，根据HTTP协议的规定，浏览器会向服务器传送If-Modified-Since报头(HttpRequest Header)，询问该时间之后文件是否有被修改过：
If-Modified-Since:Tue, 24 Feb 2009 08:01:04 GMT
如果服务器端的资源没有变化，则自动返回HTTP304（NotChanged.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一

次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。
注：如果If-Modified-Since的时间比服务器当前时间(当前的请求时间request_time)还晚，会认为是个非法请求

2、Etag工作原理
HTTP协议规格说明定义ETag为“被请求变量的实体标记”（参见14.19）。简单点即服务器响应时给请求URL标记，并在HTTP响应头中将其传送到客户端，类似服务器端返回的格式：
Etag:“5d8c72a5edda8d6a:3239″
客户端的查询更新格式是这样的：
If-None-Match:“5d8c72a5edda8d6a:3239″
如果ETag没改变，则返回状态304。
即:在客户端发出请求后，HttpReponse Header中包含Etag:“5d8c72a5edda8d6a:3239″
标识，等于告诉Client端，你拿到的这个的资源有表示ID：5d8c72a5edda8d6a:3239。当下次需要发Request索要同一个URI的时候，浏览器同时发出一个If-None-Match报头(Http

RequestHeader)此时包头中信息包含上次访问得到的Etag:“5d8c72a5edda8d6a:3239″标识。
If-None-Match:“5d8c72a5edda8d6a:3239“
,这样，Client端等于Cache了两份，服务器端就会比对2者的etag。如果If-None-Match为False，不返回200，返回304(Not Modified) Response。

3、Expires
给出的日期/时间后，被响应认为是过时。如Expires:Thu, 02 Apr 2009 05:14:08 GMT
需和Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端.当缓存中数据失效或过期，才决定从服务器更新数据。

4、Last-Modified和Expires
Last-Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标识却使得浏览器干脆连HTTP请求都不用发，比如当用户F5或者点击Refresh

按钮的时候就算对于有Expires的URI，一样也会发一个HTTP请求出去，所以，Last-Modified还是要用的，而且要和Expires一起用。

5、Etag和Expires
如果服务器端同时设置了Etag和Expires时，Etag原理同样，即与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和

WebServer发出的Last-Modified,Etag值完全一样；在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304.

6、Last-Modified和Etag
分布式系统里多台机器间文件的last-modified必须保持一致，以免负载均衡到不同机器导致比对失败
分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样)
Last-Modified和ETags请求的http报头一起使用，服务器首先产生Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改，来决定文件是否继续缓存
过程如下:
1.客户端请求一个页面（A）。
2.服务器返回页面A，并在给A加上一个Last-Modified/ETag。
3.客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。
4.客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
5.服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。
注：
1、Last-Modified和Etag头都是由WebServer发出的HttpReponse Header，WebServer应该同时支持这两种头。
2、WebServer发送完Last-Modified/Etag头给客户端后，客户端会缓存这些头；
3、客户端再次发起相同页面的请求时，将分别发送与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的

Last-Modified,Etag值完全一样；
4、通过上述值到服务器端检查，判断文件是否继续缓存；

7、关于 Cache-Control: max-age=秒和 Expires
Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求）
max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。
如果max-age和Expires同时存在，则被Cache-Control的max-age覆盖。
Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-

Control: max-age=秒替代。
Expires =max-age + “每次下载时的当前的request时间”
所以一旦重新下载的页面后，expires就重新计算一次，但last-modified不会变化; 阅读全文 »

页面相关禁止百度或其他搜索引擎/工具对页面转码: 发表日期：2014-12-26 16:08:39 | 来源： | 分类：页面相关; <meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-transform" />; 阅读全文 »

页面相关 js 获取url各种属性: 发表日期：2014-12-02 10:11:30 | 来源： | 分类：页面相关; 设置或获取对象指定的文件名或路径。alert(window.location.pathname)
设置或获取整个 URL 为字符串。alert(window.location.href);
设置或获取与 URL 关联的端口号码。alert(window.location.port)
设置或获取 URL 的协议部分。alert(window.location.protocol)
设置或获取 href 属性中在井号“#”后面的分段。alert(window.location.hash)
设置或获取 location 或 URL 的 hostname 和 port 号码。alert(window.location.host)
设置或获取 href 属性中跟在问号后面的部分。alert(window.location.search)
获取变量的值(截取等号后面的部分)
var url = window.location.search;
// alert(url.length);
// alert(url.lastIndexOf('='));
var loc = url.substring(url.lastIndexOf('=')+1, url.length);; 阅读全文 »

全部博文（1580）