前情提要:

　　　　利用html 和css ,js 模拟小米的官网(待做)

　　　　一:第一个sj利子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        // <!--编写js代码-->

        document.write('<h1>hello world</h1>')

    //    把网页发送到网页上

        alert('hello python')

    //    弹出提示框

    </script>

    <style>

        h1{

            color: red;

        }

    </style>

</head>

<body>

<script>

    document.write('<h1>hello java</h1>')

</script>

</body>

</html>

<script>

    document.write('<h1>hello golang</h1>')

</script>

　　　　二:引入外部js文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script type="text/javascript" src="d.js">-->

    <!--或者-->

    <script  src="d.js" async>

    </script>

</head>

<body>

<input type="button" value="click me" onclick="alert(11)">

</body>

</html>
alert("hello wold")

　　　　三:定义变量

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var aa = '早乙女';

        var bb = 10.5;

        var cc = true;

        dd = 10;

        alert(aa);

        alert(bb);

        alert(cc);

        alert(dd);

    </script>

</head>

<body>

</body>

</html>

　　　　四:运算符号

　　　　五:条件判断

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var aa=[40];

        if (aa>60){

            document.write("<p>优秀</p>")

        }

        else if(aa>50){

            document.write("<p>及格</p>")

        }

        else {

            document.write("<p>不及格</p>")

        }

    </script>

</head>

<body>

</body>

</html>

　　　　六:条件判断2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        // <!--根据需求生成星期几-->

        var aa=2;

        switch (aa){

            case 1:{

                document.write('这是星期1')

            }

            break;

            case 2:{

                document.write('这是星期2')

            }

            break;

            case 3:{

                document.write('这是星期3')

            }

            break;

            default:{

                document.write('没这个新奇')

            }break;

        }

    </script>

</head>

<body>

</body>

</html>

　　　　七:循环

一:

二:

三:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

    // <!--while 循环条件写在前面-->

    // <!--输出1~10的和-->

    // var num =0;

    // var sun =0;

    // while (num<10){

    //     sun =sun+num;

    //     num++;

    // }

    // alert(sun)

//    do while 循环

//    计算1~10 内的奇数和

//     var num =0;

//     var sun =0;

//     do{

//         if (num%2==1){

//             sun=sun+num;

//         }

//         num=num+1;

//     }while (num<10)

// alert(sun)

//    计算1~10 的偶数相加

    var sun =0;

    for (var num =1;num<=10;num++){

        if (num%2==0){

            sun=sun+num;

        }

    }

    alert(sun)

</script>

</head>

<body>

</body>

</html>

　　　　

八:循环案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

    // <!--生成一个三角形-->

    for (var i=1;i<=6;i++){

    //    生成空格数量

        var spnum =6-i;

        for(var col=1;col<=spnum;col++){

            document.write('&nbsp;');

        }

        var srnum =2*i-1;

        for (var nol=1;nol<=srnum;nol++){

            document.write("*")

        }

        document.write("<br/>")

    }

</script>

</head>

<body>

</body>

</html>

day 32 css后续补充以及js 简单入门的更多相关文章

  1. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  2. JS简单入门教程

    JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...

  3. css属性补充与JS数据类型

    目录 溢出属性(overflow) 定位(position) z-index属性 opacity不透明度 JavaScript简介 变量与注释 数据类型 数值(Number) 字符串(String) ...

  4. [转]Backbone.js简单入门范例

    本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...

  5. anime.js 简单入门教程

    anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...

  6. angular.js简单入门。

    小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...

  7. JS简单入门

    ------------恢复内容开始------------ JavaScript,可以减少网页的规模,提高网页的浏览速度,丰富页面的表现和功能 HTML是进行基本结构的创建的,比如说表格和表单等, ...

  8. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  9. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

随机推荐

  1. wcf服务契约继承

    a. 服务端 .契约 使用了继承 using System; using System.ServiceModel; namespace WCF.Chapter2.InheritanceReworked ...

  2. htmlparser学习(原创)

    --thumbelina.jar  这是一个演示图片搜索和显示的小程序JFrame Preferences.userNodeForPackage(getClass());  根据传入的class所在包 ...

  3. sdkbox 接facebook

    详情参见:http://sdkbox-doc.github.io/en/plugins/facebook/v3-js/#manual-integration 一步不落然后 *** Terminatin ...

  4. 2018.10.08 NOIP模拟 斐波那契（贪心+hash/map）

    传送门 签到题. 显然是可以贪心分组的,也就是尽量跟当前的分成一组. 这时我们需要判断a[l]+a[r],a[l+1]+a[r]...a[r−1]+a[r]a[l]+a[r],a[l+1]+a[r]. ...

  5. 四）mybatis 二级缓存 ehcache 常见问题

    1. java.io.NotSerializableException 94359 [EH_CACHE Async Replication Thread] ERROR n.s.e.d.jgroups. ...

  6. POP介绍与使用实践(快速上手动画)[转]

    前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有 ...

  7. android java层实现hook替换method

    Android上的热修复框架 AndFix 大家都很熟悉了,它的原理实际上很简单: 方法替换——Java层的每一个方法在虚拟机实现里面都对应着一个ArtMethod的结构体,只要把原方法的结构体内容替 ...

  8. 转一篇做BI项目的好文

    首先,我们有一个大的假设前提,集团报表平台是服务于大型公司,比如有很多分公司,子公司,多部门等,并且有BI需求的访问人群超过1000以上的公司. 这样,我们的关键词是:集团 平台 运营 集团:意味着, ...

  9. hibernate 一对多，由谁维护性能最优

    举例如下 Customer类: public class Customer { private int id; private String name; private Set orders = ne ...

  10. zookeeper集群崩溃处理

    今天在私有化项目中遇到如下问题: 1.客户反馈用户登录返回303 2.登录服务器查看是大量的log将服务器磁盘空间占用殆尽,导致所有服务进程仍旧存在但是监听端口失败,服务不可用 3.清理日志文件 4. ...