Skip to content

git第一次测试
git第一次测试

cc百川 / git第一次测试

通知 5
Star 1
Fork 1
git第一次测试
git第一次测试

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 be706da5 编写于 作者: 1 17360059320
浏览文件
操作

Add File

上级 07ba6cd3
隐藏空白更改
内联 并排
Showing with 1006 addition and 0 deletion
src4js/html/js文字转图片.html 0 → 100644
浏览文件 @ be706da5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文字转图片</title>
</head>
<body>
<label>文字内容：</label><input id="text" type="text" />
<button type="button" title="点击后文字将转为图片" onclick="textToImage()">文字转图片</button> <br/>
<img src="" id="show" title="文字转图片"/><br/>
<label>本地图片：</label>
<input onchange="localFile('localFileShow')" id="localFile" type="file" accept="image/*" /*多选multiple="multiple"*/>
<img src="" id="localFileShow"/>
<br/>
<label>水印内容：</label><input id="waterContent" type="text" value="cc百川"/>
<label>旋转角度：</label><input id="waterRotate" type="number" value="45" max="60" min="0"/>
<button type="button" title="图片添加水印" onclick="addWaterMark('show')">添加水印</button>
<button type="button" title="图片添加水印" onclick="addWaterMark('localFileShow')">图片添加水印</button> <br/>
<img src="" id="waterMark" title="图片添加水印"/>
<button type="button" title="保存到本地" onclick="saveHtml('waterMark')">水印图片保存到本地</button>
</body>
<script type="text/javascript">
textToImage=()=>{
let text = document.getElementById("text").value;//文字
if(text.trim().length == 0) {
text = "《无衣》\n岂曰无衣？与子同袍。\n王于兴师，修我戈矛，与子同仇！\n岂曰无衣？与子同泽。\n王于兴师，修我矛戟，与子偕作！\n岂曰无衣？与子同裳。\n王于兴师，修我甲兵，与子偕行！\n"+
"《子衿》\n青青子衿，悠悠我心。纵我不往，子宁不嗣音？\n青青子佩，悠悠我思。纵我不往，子宁不来？\n挑兮达兮，在城阙兮。一日不见，如三月兮。";
}
if(text.trim().length > 0) {
let imgsrc = textToImg(text, 20, "#000");
document.getElementById("show").src = imgsrc;
//需要先渲染到dom节点后才能继续处理
//宏任务
window.setTimeout(() => {
this.addWaterMark('show')
}, 0)
} else {
alert("内容为空！")
}
}
/**
* js使用canvas将文字转换成图像数据base64
* @param {string} text 文字内容
* @param {string} fontsize 文字大小
* @param {string} fontColor 文字颜色
* @param {number} lineHeight 行高
*/
textToImg = (text,fontsize = 14,fontColor = "#000",lineHeight = 0)=>{
let maxWidth = 500;
//每一行最多多少个字符
let maxNumber = Math.floor(maxWidth/fontsize);
let texts = text.split("\n");
let endTexts = [];
for(let i = 0;i < texts.length; i++){
let str = texts[i];
if(str.trim().length == 0) continue;
if(str.length*fontsize > maxWidth) {
while(str.length > 0){
let nowNuber = maxNumber;
//处理结束符号换行问题
if(/^(，|。|\?|!|、|:|;)/ig.test(str.substr(nowNuber).trimLeft())) {
nowNuber += 1;
}
endTexts.push(str.substring(0, nowNuber));
str = str.substr(nowNuber).trimLeft();
}
}else {
endTexts.push(str);
}
}
let maxHeight = (fontsize + lineHeight) * ((endTexts.length || 1) + 1) ;
let canvas = document.createElement('canvas'); //创建canvas画布
canvas.height = maxHeight;//设置高度
canvas.width = maxWidth;//设置宽度
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, maxWidth, maxHeight);
ctx.fillStyle = fontColor;
ctx.font = fontsize + "px Arial";
//top（顶部对齐） hanging（悬挂） middle（中间对齐） bottom（底部对齐） alphabetic是默认值
ctx.textBaseline = 'middle';
for(let i = 0; i < endTexts.length; i++) {
let lineText = endTexts[i];
ctx.fillText(lineText, 0, (fontsize + lineHeight) * (i + 1), canvas.width);
}
return canvas.toDataURL('image/png');
}
/**
* js使用canvas给图片添加水印
* @param {string} imageId 图片所在img的id
* @param {string} waterContent 水印内容
* @param {map} otherparams 水印参数
*/
addWaterMark=(imageId = "",
waterContent= document.getElementById("waterContent").value,
otherparams = {
rotate:document.getElementById("waterRotate").value || 0,
fillStyle:"#f00",
fontSize:14,
waterLineSpaceing:20,
waterPadding:20}
)=>{
if(!!imageId) {
let imgeEle = document.getElementById(imageId);
let imageSrc = imgeEle.src;
if(imageSrc) {
//创建图片对象
let img = new Image();
img.src = imageSrc;
let imgWidth = img.width, imgHeight = img.height;
//创建canvas画布
let canvas = document.createElement('canvas');
canvas.height = imgHeight;//设置高度
canvas.width = imgWidth;//设置宽度
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);//图片插入画布
ctx.font = otherparams.fontSize+"px 微软雅黑";
ctx.rotate(otherparams.rotate * Math.PI / 180);//围绕（0，0）旋转
ctx.fillStyle = otherparams.fillStyle;
//水印总长度
let waterLength = waterContent.length * otherparams.fontSize;
//旋转后的宽度
let rWaterWidth = Math.cos((otherparams.rotate * Math.PI) / 180) * waterLength;
//旋转后的高度
let rWaterHeight = Math.sin((otherparams.rotate * Math.PI) / 180) * waterLength + (otherparams.waterLineSpaceing || 0);
//水印列数
let waterColNumber = Math.floor(imgWidth / (rWaterWidth || imgWidth));
//水印行数
let waterRowNumber = Math.ceil(imgHeight / (rWaterHeight || imgHeight));
for(let col = 0 ; col < waterColNumber ; col++){
//计算减去偏移量
let x = (rWaterWidth * col + Math.sin((otherparams.rotate * Math.PI) / 180) * otherparams.fontSize).toFixed();
for(let row = 0 ; row < waterRowNumber ; row++) {
//计算减去偏移量、
let y = (row * rWaterHeight + otherparams.fontSize - Math.sin((otherparams.rotate * Math.PI) / 180) * waterLength * col).toFixed();
ctx.fillText(waterContent, x, y); //选择位置
}
}
document.getElementById("waterMark").src = canvas.toDataURL('image/png', 0.5);
}
} else {
console.error("参数异常imageId=" + imageId)
}
}
localFile=(imageid)=>{
let files = document.getElementById("localFile");
let file = files.files[0];
let urlObject = window.URL || window.webkitURL || window;
//宏任务
window.setTimeout(() => {
document.getElementById(imageid).src=urlObject.createObjectURL(new Blob([file]));
}, 0);
}
/* 保存最终html */
saveHtml=(imageid)=>{
let save_link = document.createElement("a");
//返回一个url URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
save_link.href = document.getElementById(imageid).src;
save_link.download = "水印内容";//下载后的名称
triggerEvent(save_link, "click");
}
/* 给定的对象上面，模拟事件 */
triggerEvent=(obj, type="click")=>{
let ev = document.createEvent("MouseEvents");
ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null );
obj.dispatchEvent(ev);
}
</script>
</html>
\ No newline at end of file
src4js/html/testhtml.html 0 → 100644
浏览文件 @ be706da5
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
<style>
div{
background-repeat:no-repeat;
background-size:100%100%;
background-origin:content-box;
width:200px;
height:200px;
border:1px solid red;
}
div
{
border:2px solid;
border-radius:25px;
box-shadow:10px10px5px#888888;
border-image:url(border.png)3030 round;
}
.cc1211{
writing-mode: vertical-rl;
letter-spacing: 1px;
}
.cc1211 b{
text-combine-upright: all;
margin: 5px 0;
}
</style>
</head>
<body>
<button onclick="goPage('bottom')">到达底部</button><br>
<div>
<section>
<h1>����һ��sectionԪ��</h1>
<p>����һ����������</p>
<section>
<h2>A</h2>
<p>A������</p>
</section>
<section>
<h2>B</h2>
<p>B������</p>
</section>
</section>
</div>
<div class="cc1211">
<h1>�峯</h1>
<p>���й���ʷ�����һ���⽨������</p>
<p>����ʮ���ۣ�</p>
<p>ͳ����Ϊ���ް��¾����ϡ�</p>
<p>��Ŭ�����ཨ�������</p>
<p>�ܼ�<b>296</b>�ꡣ</p>
<p>�ӻ�̫���Ĺ���Ϊ���𣬹���<b>276</b>�ꡣ</p>
<p>����ȫ������Ȩ����Ϊ<b>268</b>�ꡣ</p>
</div>
<div class="cc1210">
<form></form>
<img src="file:///C:/Users/Administrator/Pictures/1.jpg" width="200"></img>
</div>
<div class="cc1209">
</div>
<marquee scrolldelay="200" direction="right">Welcome!</marquee>
<marquee scrolldelay="200" direction="left">Welcome1!</marquee>
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ��������������Ƴ�������ʱ�������� onMouseOver="this.stop()"����������������������ʱֹͣ����</marquee>
<marquee direction="down">�趨���Ļ�Ĺ�������direction="down"������</marquee>
<marquee direction="left">�趨���Ļ�Ĺ�������direction="left"������</marquee>
<marquee direction="right">�趨���Ļ�Ĺ�������direction="right"������</marquee>
<marquee direction="up">�趨���Ļ�Ĺ�������direction="up"������</marquee>
<mark>55555555555</mark>
<strong >ssssssssss</strong >
<iframe src="http://127.0.0.1:8082/odoc/odoc/index_c.jsp">ssssssssssss</iframe>
<div>sss</div>
<address></address>
<span>1</span>
<wbr/>
<span>1</span>
<embed/>
<span>1</span>
<img/>
<span>1</span>
<button onclick="goPage('top')">到达顶部</button>
<script>
window.onload=function(){
console.log("onload")
}
window.onunload=function(){
console.log("onunload")
}
window.onbeforeunload=function(){
console.log("onbeforeunload")
}
document.onkeydown=(keyParams)=>{
const {code, keyCode, key } = keyParams;
console.log(code, keyCode, key );
}
goPage =(type) =>{
let keyCode,code;
if(type == "top") {
keyCode = 36;
code = "Home";
} else if(type == "bottom"){
keyCode = 35;
code = "End"
} else {
console.log("暂不支持该类型"+type);
return;
}
let ev = new KeyboardEvent('keydown', { ctrlKey: true,keyCode,code});
document.dispatchEvent(ev);
}
</script>
</body>
</html>
\ No newline at end of file
src4js/html/upload分片.html 0 → 100644
浏览文件 @ be706da5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分片上传</title>
<script>
/*
* JavaScript MD5
* https://github.com/blueimp/JavaScript-MD5
*
* Copyright 2011, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*
* Based on
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/* global define */
/* eslint-disable strict */
;(function ($) {
'use strict'
/**
* Add integers, wrapping at 2^32.
* This uses 16-bit operations internally to work around bugs in interpreters.
*
* @param {number} x First integer
* @param {number} y Second integer
* @returns {number} Sum
*/
function safeAdd(x, y) {
var lsw = (x & 0xffff) + (y & 0xffff)
var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
return (msw << 16) | (lsw & 0xffff)
}
/**
* Bitwise rotate a 32-bit number to the left.
*
* @param {number} num 32-bit number
* @param {number} cnt Rotation count
* @returns {number} Rotated number
*/
function bitRotateLeft(num, cnt) {
return (num << cnt) | (num >>> (32 - cnt))
}
/**
* Basic operation the algorithm uses.
*
* @param {number} q q
* @param {number} a a
* @param {number} b b
* @param {number} x x
* @param {number} s s
* @param {number} t t
* @returns {number} Result
*/
function md5cmn(q, a, b, x, s, t) {
return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
}
/**
* Basic operation the algorithm uses.
*
* @param {number} a a
* @param {number} b b
* @param {number} c c
* @param {number} d d
* @param {number} x x
* @param {number} s s
* @param {number} t t
* @returns {number} Result
*/
function md5ff(a, b, c, d, x, s, t) {
return md5cmn((b & c) | (~b & d), a, b, x, s, t)
}
/**
* Basic operation the algorithm uses.
*
* @param {number} a a
* @param {number} b b
* @param {number} c c
* @param {number} d d
* @param {number} x x
* @param {number} s s
* @param {number} t t
* @returns {number} Result
*/
function md5gg(a, b, c, d, x, s, t) {
return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
}
/**
* Basic operation the algorithm uses.
*
* @param {number} a a
* @param {number} b b
* @param {number} c c
* @param {number} d d
* @param {number} x x
* @param {number} s s
* @param {number} t t
* @returns {number} Result
*/
function md5hh(a, b, c, d, x, s, t) {
return md5cmn(b ^ c ^ d, a, b, x, s, t)
}
/**
* Basic operation the algorithm uses.
*
* @param {number} a a
* @param {number} b b
* @param {number} c c
* @param {number} d d
* @param {number} x x
* @param {number} s s
* @param {number} t t
* @returns {number} Result
*/
function md5ii(a, b, c, d, x, s, t) {
return md5cmn(c ^ (b | ~d), a, b, x, s, t)
}
/**
* Calculate the MD5 of an array of little-endian words, and a bit length.
*
* @param {Array} x Array of little-endian words
* @param {number} len Bit length
* @returns {Array<number>} MD5 Array
*/
function binlMD5(x, len) {
/* append padding */
x[len >> 5] |= 0x80 << len % 32
x[(((len + 64) >>> 9) << 4) + 14] = len
var i
var olda
var oldb
var oldc
var oldd
var a = 1732584193
var b = -271733879
var c = -1732584194
var d = 271733878
for (i = 0; i < x.length; i += 16) {
olda = a
oldb = b
oldc = c
oldd = d
a = md5ff(a, b, c, d, x[i], 7, -680876936)
d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330)
a = md5ff(a, b, c, d, x[i + 4], 7, -176418897)
d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426)
c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341)
b = md5ff(b, c, d, a, x[i + 7], 22, -45705983)
a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416)
d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417)
c = md5ff(c, d, a, b, x[i + 10], 17, -42063)
b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162)
a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682)
d = md5ff(d, a, b, c, x[i + 13], 12, -40341101)
c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290)
b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329)
a = md5gg(a, b, c, d, x[i + 1], 5, -165796510)
d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632)
c = md5gg(c, d, a, b, x[i + 11], 14, 643717713)
b = md5gg(b, c, d, a, x[i], 20, -373897302)
a = md5gg(a, b, c, d, x[i + 5], 5, -701558691)
d = md5gg(d, a, b, c, x[i + 10], 9, 38016083)
c = md5gg(c, d, a, b, x[i + 15], 14, -660478335)
b = md5gg(b, c, d, a, x[i + 4], 20, -405537848)
a = md5gg(a, b, c, d, x[i + 9], 5, 568446438)
d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690)
c = md5gg(c, d, a, b, x[i + 3], 14, -187363961)
b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463)
c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562)
b = md5hh(b, c, d, a, x[i + 14], 23, -35309556)
a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060)
d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353)
c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
d = md5hh(d, a, b, c, x[i], 11, -358537222)
c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
d = md5hh(d, a, b, c, x[i + 12], 11, -421815835)
c = md5hh(c, d, a, b, x[i + 15], 16, 530742520)
b = md5hh(b, c, d, a, x[i + 2], 23, -995338651)
a = md5ii(a, b, c, d, x[i], 6, -198630844)
d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415)
c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905)
b = md5ii(b, c, d, a, x[i + 5], 21, -57434055)
a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571)
d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606)
c = md5ii(c, d, a, b, x[i + 10], 15, -1051523)
b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799)
a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359)
d = md5ii(d, a, b, c, x[i + 15], 10, -30611744)
c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380)
b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649)
a = md5ii(a, b, c, d, x[i + 4], 6, -145523070)
d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379)
c = md5ii(c, d, a, b, x[i + 2], 15, 718787259)
b = md5ii(b, c, d, a, x[i + 9], 21, -343485551)
a = safeAdd(a, olda)
b = safeAdd(b, oldb)
c = safeAdd(c, oldc)
d = safeAdd(d, oldd)
}
return [a, b, c, d]
}
/**
* Convert an array of little-endian words to a string
*
* @param {Array<number>} input MD5 Array
* @returns {string} MD5 string
*/
function binl2rstr(input) {
var i
var output = ''
var length32 = input.length * 32
for (i = 0; i < length32; i += 8) {
output += String.fromCharCode((input[i >> 5] >>> i % 32) & 0xff)
}
return output
}
/**
* Convert a raw string to an array of little-endian words
* Characters >255 have their high-byte silently ignored.
*
* @param {string} input Raw input string
* @returns {Array<number>} Array of little-endian words
*/
function rstr2binl(input) {
var i
var output = []
output[(input.length >> 2) - 1] = undefined
for (i = 0; i < output.length; i += 1) {
output[i] = 0
}
var length8 = input.length * 8
for (i = 0; i < length8; i += 8) {
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << i % 32
}
return output
}
/**
* Calculate the MD5 of a raw string
*
* @param {string} s Input string
* @returns {string} Raw MD5 string
*/
function rstrMD5(s) {
return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
}
/**
* Calculates the HMAC-MD5 of a key and some data (raw strings)
*
* @param {string} key HMAC key
* @param {string} data Raw input string
* @returns {string} Raw MD5 string
*/
function rstrHMACMD5(key, data) {
var i
var bkey = rstr2binl(key)
var ipad = []
var opad = []
var hash
ipad[15] = opad[15] = undefined
if (bkey.length > 16) {
bkey = binlMD5(bkey, key.length * 8)
}
for (i = 0; i < 16; i += 1) {
ipad[i] = bkey[i] ^ 0x36363636
opad[i] = bkey[i] ^ 0x5c5c5c5c
}
hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
}
/**
* Convert a raw string to a hex string
*
* @param {string} input Raw input string
* @returns {string} Hex encoded string
*/
function rstr2hex(input) {
var hexTab = '0123456789abcdef'
var output = ''
var x
var i
for (i = 0; i < input.length; i += 1) {
x = input.charCodeAt(i)
output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
}
return output
}
/**
* Encode a string as UTF-8
*
* @param {string} input Input string
* @returns {string} UTF8 string
*/
function str2rstrUTF8(input) {
return unescape(encodeURIComponent(input))
}
/**
* Encodes input string as raw MD5 string
*
* @param {string} s Input string
* @returns {string} Raw MD5 string
*/
function rawMD5(s) {
return rstrMD5(str2rstrUTF8(s))
}
/**
* Encodes input string as Hex encoded string
*
* @param {string} s Input string
* @returns {string} Hex encoded string
*/
function hexMD5(s) {
return rstr2hex(rawMD5(s))
}
/**
* Calculates the raw HMAC-MD5 for the given key and data
*
* @param {string} k HMAC key
* @param {string} d Input string
* @returns {string} Raw MD5 string
*/
function rawHMACMD5(k, d) {
return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
}
/**
* Calculates the Hex encoded HMAC-MD5 for the given key and data
*
* @param {string} k HMAC key
* @param {string} d Input string
* @returns {string} Raw MD5 string
*/
function hexHMACMD5(k, d) {
return rstr2hex(rawHMACMD5(k, d))
}
/**
* Calculates MD5 value for a given string.
* If a key is provided, calculates the HMAC-MD5 value.
* Returns a Hex encoded string unless the raw argument is given.
*
* @param {string} string Input string
* @param {string} [key] HMAC key
* @param {boolean} [raw] Raw output switch
* @returns {string} MD5 output
*/
function md5(string, key, raw) {
if (!key) {
if (!raw) {
return hexMD5(string)
}
return rawMD5(string)
}
if (!raw) {
return hexHMACMD5(key, string)
}
return rawHMACMD5(key, string)
}
if (typeof define === 'function' && define.amd) {
define(function () {
return md5
})
} else if (typeof module === 'object' && module.exports) {
module.exports = md5
} else {
$.md5 = md5
}
})(this)
</script>
</head>
<body>
<form>
<input type="file" id="file">
<button>上传</button>
</form>
</body>
<script type="text/javascript">
initUpload();
//初始化上传
function initUpload() {
var chunk = 100 * 1024; //每片大小
var input = document.getElementById("file"); //input file
input.onchange = function (e) {
var file = this.files[0];
var query = {};
var chunks = [];
if (!!file) {
var start = 0;
//文件分片
for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
var end = start + chunk;
chunks[i] = file.slice(start , end);
start = end;
}
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (e) {
const fileContent = e.target.result;
query = { fileMd5:md5(fileContent),fileSize: file.size, dataSize: chunk, nextOffset: 0}
upload(chunks, query);
}
}
}
}
// 执行上传
function upload(chunks, query) {
//参数拼接
var queryStr = Object.getOwnPropertyNames(query).map(key => {
return key + "=" + query[key];
}).join("&");
//请求对象
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx/opload?" + queryStr);
xhr.overrideMimeType("application/octet-stream");
//获取post body中二进制数据
var index = Math.floor(query.nextOffset / query.dataSize);
var reader = new FileReader();
reader.readAsArrayBuffer(chunks[index]);
reader.onload = function (e) {
if (xhr.sendAsBinary) {
xhr.sendAsBinary(this.result);
} else {
xhr.send(this.result);
}
}
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var resp = JSON.parse(xhr.responseText);
// 接口返回nextoffset
// resp = {
// isFinish:false,
// offset:100*1024
// }
if (typeof cb === "function") {
if (resp.isFinish === true) {
alert("上传成功");
} else {
//未上传完毕
query.offset = resp.offset;
upload(chunks, query);
}
}
}
}
}
}
</script>
</html>
\ No newline at end of file
src4js/html/在线运行html.html 0 → 100644
浏览文件 @ be706da5
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线HTML</title>
</head>
<body>
<style>
html{
height: 100%; padding: 0; margin: 0;
}
body{
height: 100%;
padding: 0;
margin: 0;
/* h5页面禁止复制以及禁止右键 */
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none; /*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}
.content{
display: flex;
flex-direction: column;
height: calc(100% - 45px);
padding: 0;
margin: 0;
}
textarea{
padding: 10px;
resize: none;
width: calc( 100% - 20px );
margin: 0;
border: 0;
}
textarea:focus{
/* 文本域 获取焦点后的样式 */
outline: none;
}
iframe{
margin: 0; border: 0;
height: 50%; border-top: 1px solid red;
}
.content #edit{
height: 50%; display: flex;
flex-direction: initial;
}
.content #editHtml,#editCss{
border-right: 1px solid red;
}
.controls{
border-top : 1px solid #808080;
border-bottom: 1px solid #808080;
padding: 10px; white-space: nowrap;
overflow-x: auto; min-height: 23px;
}
.controls a, .controls label{
text-decoration: none; user-select: none;
padding: 8px; cursor: pointer;
}
.controls a:hover, .controls label:hover{
background: #f0f0f0;
}
.body_bk_black,.body_bk_black textarea{
background:#000;
color:#fff;
}
.body_bk_white,.body_bk_white textarea{
background:#fff;
color:#000 ;
}
</style>
<div class="controls">
<label> <input type=checkbox id="runTime" onclick="onClickRunTime()" checked> 实时运行</label> |
<label onclick="saveHtml()"> 保存</label> |
<label onClick="openWindow(false)">到打开的窗口</label> |
<label onClick="openWindow(true)" >打开新窗口</label> |
<label onclick="updateBack('black')"> 黑色背景</label> |
<label onclick="updateBack('white')"> 白色背景</label> |
</div>
<div class="content">
<div id="edit">
<textarea id="editHtml" class="lineEdit">
<!-- html内容 -->
<span class="runspan">
实时运行实时编译.
</span>
<button id="testBtn">点击事件测试</button>
</textarea>
<textarea id="editCss" class="lineEdit">
<!-- css样式 -->
body {
padding: 22px !important;
}
.runspan {
display: inline-block;
background: #00ffff;
padding: 20px;
}
</textarea>
<textarea id="editJs" class="lineEdit">
<!-- js -->
document.getElementById("testBtn").onclick=function(){alert("1")}
</textarea>
</div>
<iframe name="runContent" style="width: 100%; height: 100%"></iframe>
<script>
/* 背景切换 */
updateBack=(type)=>{
if(type == "black") {
document.getElementsByTagName("body")[0].className = "body_bk_black";
document.getElementById("edit").className = "body_bk_black";//editHtml
}else if(type == 'white') {
document.getElementsByTagName("body")[0].className = "body_bk_white"
document.getElementById("edit").className = "body_bk_white";//editHtml
}
}
/* 运行编译 */
onClickRunTime=()=>{
let runIframe = window.runContent.document;
runIframe.open();
runIframe.write(finalHtml());
//禁用iframe右键
disableUse(runIframe);
runIframe.close();
};
/* 指定对象禁止使用右键和全选 */
disableUse=(obj)=>{
obj.oncontextmenu=new Function("event.returnValue=false");
obj.onselectstart=new Function("event.returnValue=false");
}
/* 打开新窗口 */
openWindow=(newWin)=>{
let win=null;
if (newWin) win= window.open()
else win= window.open("about:blank","newOldWin",'location=no,menubar=yes,status=no');
win.focus();
let runIframe = win.document;
runIframe.open();
runIframe.write(finalHtml());
runIframe.title=runIframe.title || "new在线HTML";
runIframe.close();
}
/* 最终的html内容 */
finalHtml=()=>{
let stylecss = document.getElementById("editCss").value.trim();
var _script = document.createElement("script");
_script.innerHTML = document.getElementById("editJs").value.trim()
_script.type="text/javascript";
let edithtml = `
<!DOCTYPE html>
<html>
<head>
<style>${stylecss}</style>
</head>
<body>
${document.getElementById("editHtml").value.trim()}
</body>
${_script.outerHTML}
</html>`;
return edithtml;
}
/* 即时编译 */
realtime=()=>{
if (!document.querySelector("#runTime").checked) return;
onClickRunTime();
}
/* 保存最终html */
saveHtml=(downloadName = "在线后最终HTML内容")=>{
let urlObject = window.URL || window.webkitURL || window;
//Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
let export_blob = new Blob([finalHtml()],{type: 'text/html'});
let save_link = document.createElement("a");
//返回一个url URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = downloadName;//下载后的名称
triggerEvent(save_link, "click");
}
/* 给定的对象上面，模拟事件 */
triggerEvent=(obj, type="click")=>{
let ev = document.createEvent("MouseEvents");
ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null );
obj.dispatchEvent(ev);
}
/* 初始化 */
init=()=>{
//对编辑框绑定鼠标点击事件
let objs = document.getElementsByClassName("lineEdit");
for(let i=0;i<objs.length;i++) objs[i].onkeyup=realtime
realtime();
}
init();
</script>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或