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

CSS打造下拉菜单的小箭头(border-color的利用)

昨天学会了怎么用CSS打造下拉菜单,今天于是想想怎么通过CSS制作下拉菜单的箭头,在网站上随便找了个网站查看其代码,还是不甚其解,百度一番无果后转战google,果然还是google强大,直接搜索到了自己想要的结果,CSS制作下拉菜单也解决了顺便学习了一下一个不起眼的css样式,那就是border-color.

 

首先我直接把代码贴在这里,下面做详细解释:

 

.site {
    width:auto;
    height:auto;
    background-color:#fff;
    position:relative;
}
.site b {
    border-color: #666 #fff #fff;
    border-style: solid;
    border-width: 4px;
    position:absolute;
    top:7px;
}
<div> 这就是下拉的小三角形 <b> </b> </div>

这里面通过border-color实现了一个三角形,经过自己的实践,border-color可以有四个颜色值,他们分别对应上,右,下、左三个角。以前都只有见到只有一个值的,那就是整个的都是这个颜色,你还可以只写三个值,或者两个值都是可以的,效果自己试了一下就知道了。

用CSS制作下拉菜单

昨天和大瓶子一起学html,看到有个讲下拉菜单的视频,这让我第一印象是以为这个必须得用JS做,可是看到最后他竟然是这样做的,

CSS代码如下:

#menu dd{

display:none;

}

#menu li:hover dd{

display:block;

}

HTML代码:

<div id="menu"><ul><li>

<dt>项目一</dt>

<dd>子项目一</dd>

<dd>子项目二</dd>

<dd>子项目三</dd>

</li></ul></div>

解析:首先<dd>标签都是不可见的,当鼠标放在<li>标签上时(此时li可见的部分只有<dt>),<dd>标签就会出现,当鼠标移出 <li>所在的范围(此时已经是dt和dd所在的部分了)的时候,<dd>标签又重新不可见了。

使用overflow:hidden样式导致Li前面点、圈等不见

实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。

解决办法:在ul或li内加入样式:list-style-position: inside; 即可。注意适当调节padding位置使之最适合。

列表的样式:
disc : CSS1 实心圆
circle :CSS1 空心圆
square :CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian : CSS2 传统的亚美尼亚数字
cjk-ideographic:CSS2 浅白的表意数字
georgian : CSS2 传统的乔治数字
lower-greek :  CSS2 基础的希腊小写字母
hebrew : CSS2 传统的希伯莱数字
hiragana : CSS2 日文平假名字符
hiragana-iroha: CSS2 日文平假名序
katakana : CSS2 日文片假名字符
katakana-iroha: CSS2 日文片假名序号
lower-latin : CSS2 小写拉丁字母
upper-latin : CSS2 大写拉丁字母
list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显露
list-style-position : outside | inside
outside:  列表项目标记放置在文本以外,且围绕文本不根据标记对齐
inside :  列表项目标记放置在文本以内,且围绕文本根据标记对齐

原文地址:http://www.jb51.net/css/85970.html