2019-01-11 周末作业和整屏滚动效果

作者: 一片落叶就是渺小 | 来源:发表于2019-01-13 17:59 被阅读0次

1、假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年

1000 1000+10000.05=10001.05
1050 1050+10500.05=10501.05
……
5000
执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while循环练习1</title>
    <script type="text/javascript">
        // 1、假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
       // 1000 1000+10000.05=10001.05
      // 1050 1050+10500.05=10501.05
     // ……
    // 5000
        var money = 1000;
            var count = 0;

        while(money <= 5000){
            money*=1.05;
            count++;
        }
        console.log(count)
    </script>
</head>
<body>
</body>
</html>

2、用while循环重写小明的成绩，如果用户输入不合法就反复输入，直到正确为止
执行代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>while练习2</title>
        <script type="text/javascript">
            /*
             while循环重写小明的成绩，如果用户输入不合法就反复输入，直到正确为止
             */
            while (true){
                var score = prompt('请输入小明的成绩');
                if (!+score || (+score*10%5 != 0) || +score>100 || +score<0) {
                    alert('非法输入');
                }else {
                    break;
                }
            }
        </script>
    <body>
    </body>
</html>

1.打印1-100之间所有奇数之和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title></title>
    <script type="text/javascript">
        var sum=0;
        for(var i=1;i<100;i+=2)
        {
            sum+=i;
        }
        document.write("100以内所有奇数和为："+sum);
    </script>
</head>
<body>
</body>
</html>

2.打印1-100之间所有7的倍数的个数及总和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title></title>
    <script type="text/javascript">
        var count = 0;//个数
        var arr=[];
        var sum=0;
        for(var i=7;i<=100;i++) {
            if(i%7===0){
                arr[arr.length] = i;
                count++;
                sum+=i;
            }
        }
        console.log(count);
        console.log(arr);
        document.write("100所有7的倍数的总和为："+sum);
    </script>
</head>
<body>
</body>
</html>

3.水仙花数
水仙花数是指一个3位数，它的每个位上的数字的3 次幂之和等于它本身。
（例如：1^3 + 5^3 + 3^3 = 153）,请打印所有的水仙花数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title></title>
    <script type="text/javascript">
        document.write("水仙花数有：");
        for(var i=100;i<1000;i++)
        {
            var a=i%10;//提取个位数
            var b=(i/10)%10 //提取十位数
            b=parseInt(b);
            var c=i/100;//提取百位数
            c=parseInt(c);
            if(i==(a*a*a+b*b*b+c*c*c))
            {
                document.write(i+",");
            }
        }
    </script>
</head>
<body>
</body>
</html>

4.在页面中接收一个用户输入的数字，并判断该数是否是质数。
质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript">
         var num = prompt("请输入一个大于1的自然数:");

           /*创建布尔值*/
            var flag = true;
            /*判断值是否合法*/
            while(num<=1 || isNaN(num)){
                alert("这个数不合法");
                var num = prompt("请重新输入：");
            }
                for(var i = 2 ; i<num ; i++){

                    /*判断i是否能被j整除*/
                    if(num%i == 0){
                        /*判断进入i不是质数，改变布尔值*/
                        var flag = false;
                        break;
                    }
                 }
            if(flag){

            /*flag为true则输出*/
            alert(num+"是质数");
            }else{
                alert("这个数不是质数");
            }
     </script>
</head>
<body>
</body>
</html>

5.打印99乘法表
11=1
12=2 22=4
13=3 23=6 33=9
14=4 24=8 34=12 44=16
……
19=9 …… 99=81

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript">
        for(var i = 1; i <=9; i++){
        var b = "";
        for (var j = 1; j <= i; j++) {
            b +=j+"×"+i+"="+(i*j)+"\t";
        }
        console.log(b+"\n");
    }
     </script>
</head>
<body>
</body>
</html>

6.打印出1-100之间所有的质数

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript">
         //打印2-100之间所有的数
         for(var i=2 ; i<=100 ; i++){
             //创建一个布尔值，用来保存结果，默认i是质数
             var flag = true;
             //判断i是否是质数
             // 获取到2-i之间的所有的数
             for(var j=2 ; j<i ; j++){
                 //判断i是否能被j整除
                 if(i%j === 0){
                     //如果进入判断则证明i不是质数,修改flag值为false
                     flag = false;
                 }
             }
             //如果是质数，则打印i的值
             if(flag){
                 console.log(i);
             }
         }
     </script>
</head>
<body>
</body>
</html>

整屏滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整屏滚动</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取可视区的高度
            var $h = $(window).height();
            // alert($h);//973
            var $pages = $('.pages');
            var $points = $('.points li');
            var len = $pages.length;//一共有几屏
            var nowscreen = 0;//当前是第几屏
            var timer = null;
            //一开始给第一屏加淡入动画
            $pages.eq(0).addClass('moving');
            //把每一屏都设成可视区的高度
            $pages.css({height:$h});
            //鼠标滚轮的滚动事件
            $(window).mousewheel(function(event, data){
                //通过清除定时器实现函数节流，避免高频触发滚轮事件时一下滚动多次
                clearTimeout(timer);
                timer = setTimeout(function(){
                    //向下滑动是-1，向上滑动是1
                    // alert(data);
                    if(data == -1){//向下滑动
                        nowscreen++;
                        if(nowscreen > len -1){
                            nowscreen = len -1;
                        }
                    }else{//向上滑动
                        nowscreen--;
                        if(nowscreen < 0){
                            nowscreen = 0;
                        }
                    }
                    //修改top的值实现翻页
                    $('.pages_con').animate({top: -$h * nowscreen},300);
                    //设置当前小圆点和其它小圆点的样式
                    $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
                    //当前屏做淡入动画，其它屏移除样式
                    $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
                },200);//延迟200毫秒是经验数据
            })
            //点击小圆点也实现翻页和动画
            $points.click(function() {
                $(this).addClass('active').siblings().removeClass('active');
                $('.pages_con').animate({top: -$h*$(this).index()}, 300);
                $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
            });
        })
    </script>
</head>
<body>
    <div class="pages_con">

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="images/001.png"></div>
                <div class="right_info">
                Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    
                </div>
            </div>
        </div>

        <div class="pages page2">
            <div class="main_con">
                <div class="right_img"><img src="images/002.png"></div>
                <div class="left_info">
                2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                </div>
            </div>
            
        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="left_img"><img src="images/004.png"></div>
                <div class="right_info">
                以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

                    
                </div>
            </div>          
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="left_img"><img src="images/003.png"></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>          
        </div>

        <div class="pages page5">
            <div class="main_con">
                <div class="center_img"><img src="images/005.png"></div>        
            </div>          
        </div>

    </div>
    <!-- 定位到屏幕右侧的小圆点 -->
    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

2019-01-11 周末作业和整屏滚动效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读