html5

页面展示HTML的原代码不解析

星期六, 十一月 7th, 2020 | html5, JAVA-and-J2EE | 没有评论

1.页面需要展示原文本，不需要解析，但是碰到有 html标签的部分需要注意

2.使用如下几种方式

2.1 使用 xmp标签 现在在html5中已经废弃，不建议再使用但是也最简单，无需转化

	<xmp>
		这里的代码将原样输出：
		<script>这里是脚本</script>
	</xmp>

2.2 使用 code 标签或者 pre标签，需要替换尖括号对应的转义符

如下转义即可

	var info= "<script>这里是脚本</script>";
	//替换一个  
	info = info.replace('<', '&lt;').replace('>', '&gt;');
	//全局替换 //g是重点，如果替换的为‘/’，需要转义，吧/</g替换为'/\//g'
	info = info.replace(/</g, '&lt;').replace(/>/g, '&gt;');
	<code>
		这里的代码将原样输出：
		&lt;script&gt;这里是脚本&lt;/script&gt;
	</code>
	<--pre>
		这里的代码将原样输出：
		&lt;script&gt;这里是脚本&lt;/script&gt;
	<--/pre>

2.3 使用 textarea标签

	<textarea>
		这里的代码将原样输出：
		<script>这里是脚本</script>
	</textarea>

Tags:

css中的pointer-events样式像js一样控制绑定事件

星期二, 一月 14th, 2020 | html5 | 没有评论

1.今天处理了一个页面,有个按钮做了绑定事件，发现在其他页面都可以正常触发,有个页面就死活不行,

在印象中一直以为只有js才能控制点击等事件,排查了半天，最终还是把矛头指向了css上面,最终确认是pointer-events造成.

修改后搞定,也第一次认识了此css3下的pointer-events.

影响的代码如下：

[collectList] span i {
	pointer-events: none;
}

2.在css3中pointer-events（阻止hover、active、onclick触发事件）就像js一样

它能够：

阻止用户的点击动作产生任何效果

阻止缺省鼠标指针的显示

阻止CSS里的 hover 和 active 状态的变化触发事件

阻止JavaScript点击动作触发的事件

› Continue reading

Tags:

上传文件按钮隐藏及美化处理

星期一, 八月 12th, 2019 | html5 | 没有评论

1.上传文件的按钮一直都是系统默认感觉不好看，可以通过下面两种方式调节

1.1 通过绑定click事件进行后续处理

1.2 为样式隐藏 如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>upload</title>
</head>
<body>
	<script type="text/javascript">
		function clp(){
			return document.getElementById('fileIa').click();
		}
		function up(){
			var file = document.getElementById("file").files[0],        
     		form = new FormData(),
    		 req = new XMLHttpRequest();
    		 form.append("file", file);
     		req.onreadystatechange = function() {
        	if(req.readyState === 4 && req.status === 200) {
            	// 回调函数
       		 }
     		req.open("post", 'URL', true);
     		req.send(form);
		}
	</script>
	<a href="javascript:clp();">clp</a>
<input type="file" name="fileIa" id="fileIa" style="display: none;">
 
<p>第二种</p>
<style>
#uploadImg{overflow:hidden; position:absolute}
#handfile{ position:absolute; z-index:100; opacity:0;filter:alpha(opacity=0);}
</style>
<span id="uploadImg" title="上传图片和文件等"><input type="file" id="handfile" size="1" ><a href="javascript:;" title="上传图片文件等">upload</a></span>
</body>
</html>

Tags:

Apache、Nginx下Font Awesome等woff的文件得显示问题

星期三, 八月 7th, 2019 | html5, JAVA-and-J2EE | 没有评论

1.Apache 下配置新增

ddType application/font-sfnt otf ttf
AddType application/font-woff woff
AddType application/font-woff2 woff2
AddType application/vnd.ms-fontobject eot
 
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

2.nginx 配置新增

location ~* \.(eot|otf|ttf|woff|woff2|svg)$ {
root /data/www;
add_header Access-Control-Allow-Origin *;
}

Tags: ,

centos安装node及ant design pro项目初始化

星期六, 七月 13th, 2019 | html5 | 没有评论

1.安装node当前稳定版node-v10.16.0

	wget https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0-linux-x64.tar.xz
	xz -d node-v10.16.0-linux-x64.tar.xz
	tar -xf node-v10.16.0-linux-x64.tar
	mv node-v10.16.0-linux-x64 /usr/local/nodejs
    ln -s /usr/local/nodejs/bin/node /usr/bin/node
    ln -s /usr/local/nodejs/bin/npm /usr/bin/npm
    ln -s /usr/local/nodejs/bin/npx /usr/bin/npx

2.现在 node -v 或者 npm -v 查看对应的版本，再安装umi

   npm install -g umi
   ln -s /usr/local/nodejs/bin/umi /usr/bin/umi

3.加速npm

	npm install -g cnpm --registry=https://registry.npm.taobao.org
    npm config set registry https://registry.npm.taobao.org

4.初始化Ant Design Pro 4.0.0

	git clone https://github.com/ant-design/ant-design-pro --depth=1
	cd ant-design-pro
    cnpm install
    cnpm start
    ##下载完整版本示例
    cnpm run fetch:blocks

5.开发相关
新增自定义页面，可以在src/pages目录下新建js或者ts和less文件或者文件目录

6.在config/router.config.ts里添加 路由

Tags:

scrollTop doesn’t work on firefox and IE? 解决之法

星期四, 六月 1st, 2017 | html5, JAVA-and-J2EE | 没有评论

在使用jquery的 animate 的scrollTop 返回顶部的时，在chrome使用是好的，但是在IE下无效.

解决方法：
try using

$('body,html').animate({scrollTop:$(this).offset().top},800);

instead of

$("body").animate({scrollTop:$(this).offset().top},800);

Tags:

webp的格式的转换

星期五, 十二月 16th, 2016 | html5 | 没有评论

webp出来的有年头了,最近在看微信分享处理的文章 在 chrome浏览器下图片都是webp的格式,想另存为发现无法直接打开.

想从微信获取 jpg和png格式图片：可以使用 Mozilla Firefox 和IE 打开 都会正常显示 成jpg 和png 格式.

貌似是js检测了是否支持webp 再来加载图片的策略来 节省大规模的流量带宽.

对webp的格式一直想自动转换,去了google官方 提供的对应的转换lib包可以用命令行直接调用,也是蛮方便的.

试验了一个图片,果然压缩率 很厉害 从 31K(webp) –>408K (png),质量基本上无差

本地win-x64下载包：libwebp-0-5-1-windows-x86

› Continue reading

Tags:

WP-Syntax代码高亮插件的美化和难选中修复

星期三, 一月 14th, 2015 | html5, pagemaker, wordpress | 没有评论

上次发了一个服务器安装的配置脚本信息,由于脚本比较多,发现浏览的时候用鼠标很难选择一直不知道是什么原因;

期间尝试了去除ad广告部分和统计的js代码,可是问题依旧,无意间更换了wp-syntax的css文件竟然解决了此问题;

也不太想深究其中原因,只把美化后的css代码贴出:
这一段代码替换wp-syntax/css/wp-syntax.css里的内容即可
› Continue reading

Tags: ,

js MD5或者SHA1加密遭遇Cannot read property ‘words’ of undefined

星期六, 十一月 29th, 2014 | ajax, html5 | 没有评论

使用 CryptoJS.SHA1(“Message”) 或者 CryptoJS.MD5(“Message”) 加密密码

再使用jquery 的ajax的post提交遭遇Cannot read property ‘words’ of undefined 的情况

在官方查到解决办法：（解决方法也很简单 转成字符串即可）
摘录原文：
Ahh, it’s because the hash you get back is an object (see [https://code.google.com/p/crypto-js/#The_Hasher_Output The Hasher Output]). And when you pass an object to jQuery’s data property, then jQuery tries to convert it to a query string.

You’ll need to make sure the hash has been serialized to a string. For example:

{ key: CryptoJS.SHA1(“Message”) + ” }

– or –

{ key: CryptoJS.SHA1(“Message”).toString() }

Tags:

div点击隐藏和展示代码

星期一, 四月 21st, 2014 | html5, pagemaker | 没有评论

直接上代码了：

<script type="text/javascript">
    function showorhiddenme(){
        var t_div = document.getElementById("test");
        if (t_div.style.display == "block") {
            t_div.style.display = "none";
        } else if (t_div.style.display == "none") {
            t_div.style.display = "block"
        }
    } 
</script>

Tags:

« Previous Entries

Search

相关文章

热门文章

最新文章

文章分类

标签云

Links

Meta