手柄君的小阁

个人私货聚集地

JS parseInt() 错误用法示范

本文最后更新于 2017 年 2 月 26 日,其中的内容可能有所发展或发生改变,敬请注意。

临近期末,某专业课期末作业为制作一组拥有三个字页面的静态网页,故想做一个播放器出来。
恰逢昨晚偶然翻到硬盘角落里尘封的,上古之前网站使用的在线试听的页面。
对比某miku.fm,发现居然似乎是很早期之前的miku.fm改的……
而且由于那时候技术渣如狗,各种效果渣效果渣……

嘛嘛总之是由于一些原因想到写一个图像永远居中,图片永远有一侧刚好和浏览器对齐且图片比浏览器大的效果……
然后……
css写了一大堆P用没有……那么……
只好上js大法……

参考各大教程网站写了如下这么一小段……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function rechange_img () {
var bg_img = new Image();
bg_img.src = document.getElementById('bg_img').src;
var bg_img_width = bg_img.width.parseInt;
var bg_img_height = bg_img.height.parseInt;
var doc_width = document.documentElement.clientWidth;
var doc_height = document.documentElement.clientHeight;
if (bg_img_width < doc_width) {
bg_img_height = bg_img_height * doc_width / bg_img_width;
bg_img_width = doc_width;
}
if (bg_img_height < doc_height){
bg_img_width = bg_img_width * bg_img_height / doc_height;
bg_img_height = doc_height;
}
var bg_img_top = doc_height - bg_img_height;
bg_img_top /= 2;
bg_img_left = doc_width - bg_img_width;
bg_img_left /=2;
console.log(bg_img_width);
console.log(bg_img_height);
console.log(bg_img_top);
console.log(bg_img_left);
$("#bg_img").css({
"width":bg_img_width + "px",
"height":bg_img_height + "px",
"top":bg_img_top + "px",
"left":bg_img_left + "px"
})
}
 
window.onload = function() {
rechange_img();
}
 
window.onresize = function() {
rechange_img();
}

运行调试发现宽度未定义,
添加大量console.log();
并查阅相关教程后发现:
parseInt语句使用错误……
前面两行正确玩法是……

1
2
var bg_img_width = parseInt(bg_img.width);
var bg_img_height = parseInt(bg_img.height);

parseInt();
这货用途是强行转换字符串为数字……在我这个例子中用途是去掉"px"这货
然而这货并不是jQ那种属性的用法,老老实实加括号才是正解……
以上……
记录如上……
并上传相关学习文档
这里是最终修改后的效果
最后附曲一首……跑路

[广告]我觉得学渣柄需要看一下这本《Javascript权威指南》呢。 [领券链接]

觉得很糟糕或是挺不错?在下方留言或是右上角对文章表个态吧!

查看过去的详细收支和捐款
  1. 头像 farquer说道:

    有点帅啊 在玩前端么?

    1. 头像 Handle说道:

      既然是期末作业。。。我们这学期学的就是css和HTML。。。前端挺想玩的但是更想玩后端

  2. 头像 farquer说道:

    parseInt 是函数(方法)呀 不是属性~~~

    1. 头像 Handle说道:

      所以才是错误用法示范,外加快看在线工具里面的Handle!fm,那个是我的期末作业

      1. 头像 farquer说道:

        然而我现在正在开发一个二期需求,炸出了一大堆遗留BUG,我是填坑小能手

        1. 头像 Handle说道:

          程序语言是?外加乃的论坛什么时候重开

        2. 头像 Handle说道:

          啊不对,博客

          1. 头像 farquer说道:

            开着 ,只是太久不更新 首页重定向到一个其他页面了 我是java开发

        3. 头像 Handle说道:

          两年后一起喝咖啡吧???

来一发吐槽