#1274
展开↯#1275
作者:广西南宁市
Canvas百分比动画
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul{
list-style: none;
overflow: hidden;
width: 1200px;
margin: 0 auto;
}
li{
width: 300px;
height: 300px;
float: left;
}
body{
background-color: #333
}
</style>
</head>
<body>
<ul id="canvas">
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>70%</span>
</li>
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>60%</span>
</li>
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>30%</span>
</li>
<li>
<canvas class="canvas" width="900" height="900"></canvas>
<span>80%</span>
</li>
</ul>
<canvas id="cvs"></canvas>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var canUl=document.getElementById("canvas");
var li=canUl.getElementsByTagName("li");
var can=canUl.getElementsByTagName("canvas");
var pecent=canUl.getElementsByTagName("span");
var can_arr=[];
function Cavas_pecent(json){
this.w=json.w;
this.h=json.h;
this.timer=null;
this.deg=0;
this.new_deg=json.new_deg,
this.obj=json.obj;
this.color=json.color;
this.stroke_color=json.stroke_color;
this.pecent_f=json.pecent_f;
this.lineWidth=json.lineWidth;
this.bg_color=json.bg_color;
}
Cavas_pecent.prototype.draw = function() {
var txt=this.deg+"%";
this.obj.lineCap="round";
this.obj.lineWidth=this.lineWidth;
this.obj.strokeStyle = this.stroke_color;
this.obj.beginPath();
this.obj.arc(this.w/2,this.h/2,this.w/2-this.lineWidth,0,this.deg/100*Math.PI*2);
this.obj.fillStyle="#fff";
this.obj.font="25px Arial";
this.obj.fillText(txt , 150 - this.obj.measureText(txt).width/2 ,150);
this.obj.stroke();
}
Cavas_pecent.prototype.drawBg = function(){
this.obj.beginPath();
this.obj.strokeStyle=this.bg_color;
this.obj.arc(this.w/2,this.h/2,this.w/2-this.lineWidth,0,100*Math.PI*2);
this.obj.stroke();
this.obj.save();
return this;
}
Cavas_pecent.prototype.go_draw = function(){
var _this=this;
_this.timer=setInterval(function(){
if(_this.deg==_this.pecent_f){
clearInterval(_this.timer);
}
else{
_this.deg++;
_this.obj.clearRect(0,0,300,300);
_this.drawBg().draw()
}
},30)
}
for(var i=0;i<can.length;i++)
{
can_arr[i]=new Cavas_pecent({
w:li[i].offsetWidth,
h:li[i].offsetHeight,
obj:can[i].getContext("2d"),
color:"#a24565",
stroke_color:"#a24565",
pecent_f:parseInt(pecent[i].innerText),
lineWidth:5,
bg_color:"#fff"
})
can_arr[i].go_draw();
}
}
</script>
Run code
Cut to clipboard
文章:js 删除前confirm确认提示代码 发表时间:2017-06-14, 12:44:36
#1276
作者:广西南宁市
瑞典
罗伊.安德森 《生活三部曲》(《二楼传来的歌声》、《你还活着》、《寒枝雀静》)

瑞典从来都不是电影的荒漠,无论是英格玛.伯格曼还是乔尔恩.陶纳尔,都曾位列这个星球最伟大导演的行列。而如今的瑞典影坛,也有它的代表人物,那就是罗伊.安德森。
罗伊.安德森在三十年的导演生涯中只拍过五部长片,但部部都很精彩。尤其是近年来的《生活三部曲》,罗伊.安德森将自己对生活的感悟倾注在看似荒诞的小故事中,让人笑中带泪,于平淡中体会生活真义。
罗伊.安德森 《生活三部曲》(《二楼传来的歌声》、《你还活着》、《寒枝雀静》
magnet:?xt=urn:btih:7dab0414a140e688016328b5a9187d9d037f6434&dn=[CK%E7%94%B5%E5%BD%B1%E9%83%A8%E8%90%BDck180.com]%E5%AF%92%E6%9E%9D%E9%9B%80%E9%9D%99.2014.720P.%E4%B8%AD%E5%AD%97
Run code
Cut to clipboard
瑞典从来都不是电影的荒漠,无论是英格玛.伯格曼还是乔尔恩.陶纳尔,都曾位列这个星球最伟大导演的行列。而如今的瑞典影坛,也有它的代表人物,那就是罗伊.安德森。
罗伊.安德森在三十年的导演生涯中只拍过五部长片,但部部都很精彩。尤其是近年来的《生活三部曲》,罗伊.安德森将自己对生活的感悟倾注在看似荒诞的小故事中,让人笑中带泪,于平淡中体会生活真义。
文章:那些质量很高却冷门的电影 发表时间:2017-06-14, 12:09:31
#1277
作者:广西南宁市
匈牙利
米洛克斯.杨索 《红军与白军》

今年的奥斯卡最佳外语片《索尔之子》就来自于匈牙利。其实匈牙利电影从来都是影史中不能略过的一部分,之所以不能略过,很大程度上是因为上世纪六十年代的“匈牙利电影新浪潮”,而这部《红军与白军》的导演杨索就是这次运动的领袖人物之一。
杨索的电影大多表现匈牙利过往的历史,有着鲜明的政治色彩。但其影片中的艺术价值也是极高的,尤其是他对长镜头的运用,已经到了出神入化的地步。
除了这部《红军与白军》,《我的道路》、《无望的人们》、《静默的呼喊》这几部电影也评价颇高,不过我没有看过除了《红军与白军》之外的几部,不敢妄自推荐,有兴趣的朋友可以找来看看。
伊斯特凡.萨博 《信任》

萨博有一部不能算作冷门的电影,那就是拉尔夫.费因斯和蕾切尔.薇姿主演的《阳光情人》,因为那部电影我认识了萨博,于是找来了《信任》,看了之后惊为天人,那种镜头下冷冰冰的感觉实在太过特殊,对战争时期人们心理状况的描写,萨博做到了极致。
米洛克斯.杨索 《红军与白军》
今年的奥斯卡最佳外语片《索尔之子》就来自于匈牙利。其实匈牙利电影从来都是影史中不能略过的一部分,之所以不能略过,很大程度上是因为上世纪六十年代的“匈牙利电影新浪潮”,而这部《红军与白军》的导演杨索就是这次运动的领袖人物之一。
杨索的电影大多表现匈牙利过往的历史,有着鲜明的政治色彩。但其影片中的艺术价值也是极高的,尤其是他对长镜头的运用,已经到了出神入化的地步。
除了这部《红军与白军》,《我的道路》
ed2k://|file|My.way.home.aka.Igy.jottem.Mikl%C3%B3s.Jancs%C3%B3.avi|1275392000|6E24BDDD1ABF4074A0132867CF075C81|/
Run code
Cut to clipboard
伊斯特凡.萨博 《信任》
萨博有一部不能算作冷门的电影,那就是拉尔夫.费因斯和蕾切尔.薇姿主演的《阳光情人》,因为那部电影我认识了萨博,于是找来了《信任》,看了之后惊为天人,那种镜头下冷冰冰的感觉实在太过特殊,对战争时期人们心理状况的描写,萨博做到了极致。
文章:那些质量很高却冷门的电影 发表时间:2017-06-14, 12:03:41
#1278
作者:中国
https://m.okjike.com/messages/59315346ca07f500125ffd4d?username=843F8FFA-84EE-4F11-B1BF-8CD58CA94B38&from=singlemessage&isappinstalled=1
文章:希望这篇文章能对乐视及所有正在全球化进程中的公司提供一些有益的帮助。 发表时间:2017-06-14, 11:41:09
#1279
作者:广西南宁市
要知道你遇到的问题百分之九十九的程序员都曾遇到过,还有百分之一是天才,在写代码之前就能预见到各种可能出现的问题,然后规避错误。但绝大多数人都还是普通人,通过自己的努力实现某个功能,解决某个问题,并且愿意无偿将自己的经验和代码分享出来,避免大家重复造轮子。
文章:程序员编程常用网页工具集[游戏] 发表时间:2017-06-14, 11:32:03
#1280
作者:广西南宁市
文章:奇妙的 CSS shapes(CSS图形) 发表时间:2017-06-13, 09:22:34
#1281
作者:广西南宁市
文章:奇妙的 CSS shapes(CSS图形) 发表时间:2017-06-12, 17:54:32
#1285
作者:广西南宁市
html input的file文件输入框onchange事件触发一次失效解决方法
最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~
于是想办法解决它~
在网上找了一些资料,找到这几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
我测试了之后发现可以用下面的方法解决这个问题:
第一步:上传完成后替换掉原来的input框
第二步:重新绑定onchange事件
最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~
于是想办法解决它~
在网上找了一些资料,找到这几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
我测试了之后发现可以用下面的方法解决这个问题:
第一步:上传完成后替换掉原来的input框
第二步:重新绑定onchange事件
<script>
$(document).ready(function () {
/* jquery handleError版本兼容 */
jQuery.extend({
handleError: function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},
httpData: function (xhr, type, s) {
var ct = xhr.getResponseHeader("content-type"),
xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
data = xml ? xhr.responseXML : xhr.responseText;
if (xml && data.documentElement.tagName == "parsererror")
throw "parsererror";
if (s && s.dataFilter)
data = s.dataFilter(data, type);
if (typeof data === "string") {
if (type == "script")
jQuery.globalEval(data);
if (type == "json")
data = window["eval"]("(" + data + ")");
}
return data;
}
});
/* file输入框变化时调用上传图片函数 */
$(".myFile").change(function(){
var objId = $.trim($(this).attr('id'));
myUpload(objId);
});
/* 上传函数 */
function myUpload(objId)
{
var _obj = $('#'+objId);
var objVal = $.trim(_obj.val());
if(!objVal){
alert('你还未选择图片!');
return false;
}
$.ajaxFileUpload({
type: "post",
url: "upload.do",
secureuri:false,
fileElementId:objId,
dataType: "json",
success: function(result) {
if (result.code == "1") {
alert("上传文件成功!");
}
},
complete: function(xmlHttpRequest) {
_obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
$("#"+objId).on("change", function(){
myUpload(objId);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>
Run code
Cut to clipboard
<script>
$(document).ready(function () {
/* jquery handleError版本兼容 */
jQuery.extend({
handleError: function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},
httpData: function (xhr, type, s) {
var ct = xhr.getResponseHeader("content-type"),
xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
data = xml ? xhr.responseXML : xhr.responseText;
if (xml && data.documentElement.tagName == "parsererror")
throw "parsererror";
if (s && s.dataFilter)
data = s.dataFilter(data, type);
if (typeof data === "string") {
if (type == "script")
jQuery.globalEval(data);
if (type == "json")
data = window["eval"]("(" + data + ")");
}
return data;
}
});
/* file输入框变化时调用上传图片函数 */
$(".myFile").change(function(){
var objId = $.trim($(this).attr('id'));
myUpload(objId);
});
/* 上传函数 */
function myUpload(objId)
{
var _obj = $('#'+objId);
var objVal = $.trim(_obj.val());
if(!objVal){
alert('你还未选择图片!');
return false;
}
$.ajaxFileUpload({
type: "post",
url: "upload.do",
secureuri:false,
fileElementId:objId,
dataType: "json",
success: function(result) {
if (result.code == "1") {
alert("上传文件成功!");
}
},
complete: function(xmlHttpRequest) {
_obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
$("#"+objId).on("change", function(){
myUpload(objId);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>
Run code
Cut to clipboard
文章:常用html、demo代码 发表时间:2017-06-13, 15:32:11
#1286
作者:广西南宁市
仿造唯品会头部banner大图广告模特闪边ad图js效果

#,广西南宁市,2017-06-13,12:08:12,
<style>
.j-sp-ani{width:260px;height:610px;position: absolute;right:131px;top:58px;background: url(https://out.img.pan.lizhenqiu.com/eaeca7a66e50b79338bdedc10bdc45341497326196000) no-repeat;
-webkit-animation:run 6.2s steps(8, end) infinite;
-moz-animation:run 6.2s steps(8, end) infinite;
-ms-animation:run 6.2s steps(8, end) infinite;
-o-animation:run 6.2s steps(8, end) infinite;
animation:run 6.2s steps(8, end) infinite;
}
@-webkit-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@-moz-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@-ms-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@-o-keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
@keyframes run {
0% {
background-position: 0 0;
}
43% {
background-position: 0 0;
}
50% {
background-position: -2080px 0;
}
93% {
background-position: -2080px 0;
}
100% {
background-position: -4160px 0;
}
}
</style><div class="j-sp-ani"></div>
Run code
Cut to clipboard
文章:奇妙的 CSS shapes(CSS图形) 发表时间:2017-06-13, 11:58:37
#1287
作者:广西南宁市
请问博主,下面的代码运行以后为什么不显示红色呢?
如何用单线程来解释? #,广西南宁市,2017-06-13,11:36:40,
如何用单线程来解释?
<div style="height:30px"></div><script>var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
for (var i=0; i< 2000000; i++) {
}
el[0].style.backgroundColor = 'green';</script>
Run code
Cut to clipboard
<div style="height:30px" onclick="rr();"></div><script>
function rr(){
var el = document.getElementsByTagName('div');
el[0].style.backgroundColor = 'red';
setTimeout(function(){for (var i=0; i< 2000000; i++) {
el[0].style.backgroundColor = 'green';
}},0);}
</script>
Run code
Cut to clipboard
文章:setTimeout,前端工程师必定会打交道的一个函数 发表时间:2017-06-13, 10:38:01
#1289
作者:广西南宁市
有一个疑问,
按照说的,确实是这么运行的,但是如果我debugger的时候,为什么就首先能显示了呢?
文章:setTimeout,前端工程师必定会打交道的一个函数 发表时间:2017-06-13, 11:29:04
#1290
作者:广西南宁市
好文,之前看了阮老师那篇看的一头雾水,看了你的这篇感觉懂了好多,敢问楼主是怎么学的?从那里查到这些资料?国外社区?
文章:setTimeout,前端工程师必定会打交道的一个函数 发表时间:2017-06-13, 11:28:21
#1291
展开↯#1292
作者:广西南宁市
在js或者node里经常听到一个词 异步, 同步我可以理解就是按照顺序一个一个执行,多线程我也可以理解就是再开一个线程去处理别的事情,但是异步到底是什么意思,异步和多线程有什么区别呢?
文章:setTimeout,前端工程师必定会打交道的一个函数 发表时间:2017-06-13, 11:25:05
var inputBug=function(){ $('input[type="text"]').on('click', function () { var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); },400); }); inputBug();