html5

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

星期一, 八月 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:

jquery mobile页面显示为空白及google广告不显示

星期一, 十二月 16th, 2013 | ajax, html5, 读书 | 没有评论

经查为Stuck in “ui-mobile-rendering” – page not displayed in jQuery Mobile

解决方法:

To resolve, include into html code the attribute, data-role=”page”.

<div data-role="page">
      <p> ooxx,ooxx</p>
</div>

and then jquery-mobile will remove the class “ui-mobile-rendering”

二:google在ajax请求中不显示
解决:

 $("#readooxx").hide();
 $("#readooxx").show();

顺便做下在线书籍阅读的地址:http://www.i5a5.com/iab/,在线阅读书籍,登录可以保存阅读进度

Tags: ,

Sublime text 2 GBK编码插件-ConvertToUTF8 可以查看非UTF-8中文文档了

星期二, 十月 2nd, 2012 | computer, html5 | 一条评论

今天打开以前的文档,发现乱码,知道sublime text 2 默认都是utf-8编码,想打开gbk的文件就需要相应的插件了.

Github地址:ConvertToUTF8 https://github.com/seanliang/ConvertToUTF8

打包后的网盘下载: ConvertToUTF8

1.推荐使用 Package Control 查找 ConvertToUTF8 进行自动下载安装与更新。

2.如需手工安装,请将本项目打包下载并解压,将解压后的文件夹名修改为 ConvertToUTF8 ,

然后将此文件夹移动到 Sublime Text 的 Packages 文件夹下(可通过 Sublime Text 菜单中的 Preferences > Browse Packages 找到 Packages 文件夹)。

3.重启下Sublime text 2就支持GBK了。

更多详细介绍可以参考:

中文文档https://github.com/seanliang/ConvertToUTF8/blob/master/README.zh_CN.md

Tags: , ,

Search

相关文章

文章分类

Meta