day 32 css后续补充以及js 简单入门
前情提要:
利用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(' ');
}
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 简单入门的更多相关文章
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- JS简单入门教程
JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...
- css属性补充与JS数据类型
目录 溢出属性(overflow) 定位(position) z-index属性 opacity不透明度 JavaScript简介 变量与注释 数据类型 数值(Number) 字符串(String) ...
- [转]Backbone.js简单入门范例
本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...
- anime.js 简单入门教程
anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...
- angular.js简单入门。
小弟刚接触angular js 就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...
- JS简单入门
------------恢复内容开始------------ JavaScript,可以减少网页的规模,提高网页的浏览速度,丰富页面的表现和功能 HTML是进行基本结构的创建的,比如说表格和表单等, ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
随机推荐
- AMD、CMD、UMD 模块的写法
简介 最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长.虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面.开发新手们会很快发现不是所有组件都能彼此“和平相 ...
- 2018.07.25 bzoj2125: 最短路（圆方树+倍增）
传送门 人生的第一道仙人掌. 这道题求是仙人掌上的最短路. 先建出圆方树,然后用倍增跑最短路,当lca" role="presentation" style=" ...
- 20155212 2016-2017-2 《Java程序设计》第7周学习总结
20155212 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 Chapter13 取得系统时间的方法之一是System.currentTimeMillis ...
- Redis Cluster原理初步
目录 目录 1 1. 前言 1 2. 槽(slots) 1 3. 路由配置(node.conf) 1 4. 总slots数(cluster.h:16384) 2 5. key的路由 2 6. 将key ...
- 自定义方法实现strcpy,strlen, strcat, strcmp函数,了解及实现原理
位置计算字符串长度 //strlen()函数,当遇到'\0'时,计算结束,'\0'不计入长度之内 //字符串的拷贝 //strcpy(字符串1,字符串2); //把字符串2 ...
- （线段树） Count the Colors --ZOJ --1610
链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82832#problem/F http://acm.zju.edu.cn/onli ...
- noip第11课作业
1. 数字比较 定义一个函数check(n,d),让它返回一个布尔值,如果数字d在正整数n的某位中出现则返回true,否则返回false. 例如:check(325719,3)==true:ch ...
- 【TFS 2017】使用浏览器上传文件（TFVC）或者编辑代码，错误提示TF14098，需要对文件有PendChange 权限
从TFS 2015开始,微软在TFS系统中增加了一个非常吸引开发人员的功能,"快速代码编辑器" (Quick Code Editor).使用这个功能,你可以在任何安装了浏览器的设备 ...
- OpenDiscussion_DataDrivenDesign
本文源于公司内部技术交流,如有不当之处,还请指正. Content: 1. What is Data-driven design? 2. WPF revolution. 3. More about O ...
- [ASP.NET]Net Framework环境问题的一种修复方案
一.情况介绍 造价软件基于.net framework 4.0开发,要成功运行需要在目标电脑上安装4.0版本以上的framework.一般情况下xp是没有的,win7系列自带3.5,都需要手动安装4. ...