前情提要:

    利用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. 12月6日 被引入的jsp 页面,引入 js 要注意结束符 要用 </script> 而不是 />

    12月6日  被引入的jsp 页面,引入 js 要注意结束符 要用  </script> 而不是 />

  2. 直压到亚马逊AWS平台,阿里云OSS平台或者腾讯云COS平台

    GTX Compressor (直压上云技术预览版) Powered by GTXLab of Genetalks. 技术预览版本下载地址: https://github.com/Genetalks/ ...

  3. ELMAH 使用

    之前大部分系统日志记录是使用log4net.ObjectGuy Framework.NLog 等工具记录到文本或数据库. 更强大的工具可以使用 ELMAH. ELMAH(The Error Loggi ...

  4. 『jQuery』.html(),.text()和.val()的使用

    『jQuery』.html(),.text()和.val()的使用 2013-04-21 10:25 by 我是文东, 8335 阅读, 0 评论, 收藏, 编辑 本节内容主要介绍的是如何使用jQue ...

  5. MySQL之安装以及辅助工具的安装

    一 下载地址 MySQL 下载地址: http://rj.baidu.com/soft/detail/12585.html?ald 客户端工具:MavicatforMySQL 绿色版下载地址:http ...

  6. 2018.10.14 NOIP训练 圣诞树(简单dp)

    传送门 sbDP题. 曾经一直TLE不知道为什么. 这次发现输入有坑233. 代码

  7. 2018.08.10 atcoder No Need(线性dp)

    传送门 输入一个序列an" role="presentation" style="position: relative;">anan,输入k&q ...

  8. xib中快捷键

    Alt  + 点击视图,实现快速复制 点击视图, + Alt  将鼠标放在另一个视图上,可以显示两视图x 和y方向的距离, 按方向键上下,调节两视图的距离 Command + Shift + G 前往 ...

  9. FP-Growth in Spark MLLib

    并行FP-Growth算法思路 上图的单线程形成的FP-Tree. 分布式算法事实上是对FP-Tree进行分割,分而治之 首先,假设我们只关心...|c这个conditional transactio ...

  10. 全自动baidu云盘下载脚本

    20141231<吃元宵>孔云龙_6平米.MP3 20141231<家庭论>李云杰_6平米.MP3 20141231<劫皇杠>李昊洋_6平米.MP3 2014123 ...