JS版分解质因数

JS版分解质因数,保存成html打开就可以了,被同学点名了,花一个中午的时间才写出来,用到了新的知识,正则表达式…

JS版分解质因数,保存成html打开就可以了,被同学点名了,花一个中午的时间才写出来,用到了新的知识,正则表达式:

var num = prompt('input your number then i will go on:','90');
var regex = new RegExp(/^[0-9]*[1-9][0-9]*$/);
var i = 2;
var handle = num;
var arr = new Array();
while(i<handle){//i小于num则一直循环下去,直到i=num为止
    var result = handle/i;
    if(regex.test(result)){ //除2结果为整数
        arr.push(i);
        i=2;
        handle=result;
    }else{
        i++;         }
    if(i == handle-1){  //判断是否要结尾
        arr.push(handle)
        break;         }     }     //打印结果
var str = String();
for(i=0;i<arr.length;i++){
    str += arr[i];
    if(i != arr.length-1)
        str += '*';
}
alert('the result :'+str);

用javascript制作返回顶部按钮

以前一直想实现的返回顶部按钮现在终于算是实现了,其实还是用到了JS里的setTimeout()方法,另一篇关于setTimeout()方法的介绍的文章可以点击这里:

https://blog.yeskn.com/archives/536.html

我的这个返回顶部的按钮做的比较简单,因为需要符合网站一致的风格,所以只添加了“返回顶部”这四个字当做按钮,并且我看到似乎豆瓣也是这样么做的。你可以在我的首页的右下角看到他,或许你已经发现了吧。

这个效果是模仿极客公园的效果做的,原始的效果可以点http://geekpark.net 查看。

主要的效果是点击返回顶部按钮的时候,出现一个小火箭,然后网页动态的返回顶部,当到达顶部的时候,小火箭就往上飞,直到消失。

点击此处查看DEMO:https://blog.yeskn.com/uploads/back-to-up.html

我写的代码如下:

<script>
var ptt=0;
function pageScroll() {
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10); //每次上升10px
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(document.body.scrollTop==0) {
  document.getElementById('flypig').style.marginBottom=ptt;
  ptt=ptt+10;
}//火箭向上飞的效果

if(ptt>=1000){
  ptt=0;
  document.getElementById('flypig').style.marginBottom=20;
  document.getElementById('flypig').style.display='none';
  clearTimeout(scrolldelay);
}//返回原始状态
//pageScroll ends
}

</script>

html部分代码:

<div style="display:none;float:left;position:fixed;
    bottom:20;margin-left:75%;cursor:pointer;" 
    id="flypig">
    <img src="<?php bloginfo('template_directory'); ?>/images/flypig.gif" /> 
</div>

<div style="float:left;position:fixed;
    bottom:10;margin-left:75%;cursor:pointer;" 
    id="go" onclick="pageScroll()">返回顶部
</div>

详解:首先想看到效果的话请滚动窗口滚动条向下一定的距离,然胡,点击‘返回顶部’这个div,然后id为flypig的div的display属性从none变为block,即就将小火箭显示出来,然后开始10px的速度返回顶部,当小火箭与底部的距离(ppt)大于1000px的时候,就停止setTimeout,并将ppt置零,然后再将小火箭向下的距离设为20(这是我自己定的距离,),然后再次隐藏它,使一切回到初始状态。

用javascript使div自由移动

作为javascript小白,经常看到别人的网页有图片匀速移动,或者其他比较炫的效果,比如说幻灯片等网页元素可以自由移动的效果,网页返回顶部,当鼠标点击某个元素,元素就自动跑动等等。羡慕不已,可是自己只会一些简单的JS,为了学习之,于是自己摸索了一番,首先是W3C上的HTML DOM setTimeout()让我完成了这个效果,我制作的效果可以点击这里:

https://blog.yeskn.com/uploads/js-to-move.html

代码摘录如下:

<html>
<head>
    <meta charset=utf8 />
    <script>
        var mt=0,opc=0,mr=0,tr;
        var time;
        function move(){
            if(mt<=500){
                document.getElementById('cube').style.marginLeft=mt+'px';
                document.getElementById('cube').style.opacity=opc;
                if(opc<1) opc=opc+0.01;
                mt=mt+5;
                tr=mt;
            }
            else if(mr<=400){
                document.getElementById('cube').style.marginTop=mr+'px';
                mr=mr+5;
                tt=mr;
            }
            else if(tr>=5){
                document.getElementById('cube').style.marginLeft=tr+'px';
                tr=tr-5;
            }
            else if(tt>=5){
            document.getElementById('cube').style.marginTop=tt+'px';
                tt=tt-5;

            }
            time=setTimeout("move()",10);

        }
    </script>
</head>
<body onload="move()">
    <div style="position:absolute;width:300px;height:300px;background:pink;opacity=0;border-radius:10px;" id="cube" onclick="clearTimeout(time);"></div>
</body>
</html>

其中最重要的是使用了setTimeOut()这个JS里的函数,然后求元素的左边距是style.marginLeft,对应的还有style.marginRight等其余的三个,而不是style.margin-left,这一点要特别注意,并且还有一个有点坑的是,

document.getElementById('cube').style.marginLeft

这个方法求得的不是一个纯粹的数,因为这个长度是有单位的,所以,他的数据类型应该是一个字符串,赋值时需要使用数字+’px’这样的方式。
进阶教程可以查看W3C关于setInterval()方法的说明:http://www.w3school.com.cn/htmldom/met_win_setinterval.asp